├── src
    ├── global.less
    ├── pages
    │   ├── .umi
    │   │   ├── polyfills.js
    │   │   ├── initHistory.js
    │   │   ├── umi.js
    │   │   └── router.js
    │   ├── index.css
    │   └── index.js
    └── Home
    │   ├── less
    │       ├── edit.less
    │       ├── antMotionStyle.less
    │       ├── common.less
    │       ├── custom.less
    │       ├── content.less
    │       ├── content0.less
    │       ├── content11.less
    │       ├── content3.less
    │       ├── footer1.less
    │       ├── content1.less
    │       ├── banner0.less
    │       └── nav0.less
    │   ├── Content11.jsx
    │   ├── Banner0.jsx
    │   ├── Footer1.jsx
    │   ├── Content1.jsx
    │   ├── Content0.jsx
    │   ├── Nav0.jsx
    │   ├── index.jsx
    │   ├── Content3.jsx
    │   └── data.source.js
├── logo.png
├── .umirc.js
├── .gitignore
├── README.md
├── index.html
└── package.json


/src/global.less:
--------------------------------------------------------------------------------
1 | @import './Home/less/antMotionStyle.less';
2 | 


--------------------------------------------------------------------------------
/src/pages/.umi/polyfills.js:
--------------------------------------------------------------------------------
1 | import '@babel/polyfill';
2 | 
3 | 


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Exrick/xboot-show/HEAD/logo.png


--------------------------------------------------------------------------------
/src/pages/index.css:
--------------------------------------------------------------------------------
1 | 
2 | .normal {
3 |   background: #C6F279;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
1 | import Home from '../Home';
2 | 
3 | export default function () {
4 |   return (
5 |     <Home />
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/src/pages/.umi/initHistory.js:
--------------------------------------------------------------------------------
1 | // create history
2 | window.g_history = require('umi/_createHistory').default({
3 |   basename: window.routerBase,
4 | });
5 | 


--------------------------------------------------------------------------------
/.umirc.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     plugins: [
 3 |       [
 4 |         'umi-plugin-react', {
 5 |           antd: true,
 6 |         }
 7 |       ],
 8 |     ]
 9 |   }
10 |   


--------------------------------------------------------------------------------
/src/Home/less/edit.less:
--------------------------------------------------------------------------------
 1 | .banner-anim-elem > .banner1-text-wrapper > .jtnsptxmynl-editor_css {
 2 |   width: 550px;
 3 | }
 4 | .banner0 > .banner0-text-wrapper > .jtnstd5q52-editor_css {
 5 |   width: 300px;
 6 |   min-height: 180px;
 7 | }
 8 | .banner0 > .banner0-text-wrapper > .jtntac62itf-editor_css {
 9 |   text-decoration: none;
10 | }
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | .DS_Store
 3 | node_modules
 4 | /dist
 5 | package-lock.json
 6 | xb
 7 | 
 8 | # local env files
 9 | .env.local
10 | .env.*.local
11 | 
12 | # Log files
13 | npm-debug.log*
14 | yarn-debug.log*
15 | yarn-error.log*
16 | 
17 | # Editor directories and files
18 | .idea
19 | .vscode
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw*


--------------------------------------------------------------------------------
/src/Home/less/antMotionStyle.less:
--------------------------------------------------------------------------------
 1 | @import './common.less';
 2 | @import './custom.less';
 3 | @import './content.less';
 4 | @import './nav0.less';
 5 | @import './banner0.less';
 6 | @import './content0.less';
 7 | @import './content3.less';
 8 | @import './content1.less';
 9 | @import './content11.less';
10 | @import './footer1.less';
11 | @import './edit.less';


--------------------------------------------------------------------------------
/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 | /* .content-wrapper > .tween-one-leaving,
 9 | .queue-anim-leaving {
10 |   // position: absolute !important;
11 |   // width: 100%;
12 | } */
13 | 
14 | .video {
15 |   max-width: 800px;
16 | }
17 | 
18 | #react-content {
19 |   min-height: 100%;
20 | }
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [XBoot宣传官网](http://xb.exrick.cn)
 2 | - 官网地址：http://xb.exrick.cn/
 3 | - 使用 [阿里 Ant Design Landing](https://landing.ant.design/index-cn) 编辑开发
 4 | - 基于脚手架 [umi](https://landing.ant.design/docs/use/umi) 创建
 5 | 
 6 | ![WX20190325-172718@2x.png](https://i.loli.net/2019/03/25/5c989f0514a40.png)
 7 | 
 8 | ### 本地开发运行
 9 | - npm install --save umi
10 | - npm i
11 | - umi dev
12 | - 默认端口8000
13 | ### 打包部署
14 | - umi build
15 | 


--------------------------------------------------------------------------------
/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: fade(@template-bg-color, 95%);
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 | 


--------------------------------------------------------------------------------
/src/pages/.umi/umi.js:
--------------------------------------------------------------------------------
 1 | import './polyfills';
 2 | 
 3 | import '@tmp/initHistory';
 4 | import React from 'react';
 5 | import ReactDOM from 'react-dom';
 6 | 
 7 | 
 8 | // runtime plugins
 9 | window.g_plugins = require('umi/_runtimePlugin');
10 | window.g_plugins.init({
11 |   validKeys: ['patchRoutes','render','rootContainer','modifyRouteProps','onRouteChange',],
12 | });
13 | 
14 | 
15 | 
16 | // render
17 | let oldRender = () => {
18 |   const rootContainer = window.g_plugins.apply('rootContainer', {
19 |     initialValue: React.createElement(require('./router').default),
20 |   });
21 |   ReactDOM.render(
22 |     rootContainer,
23 |     document.getElementById('root'),
24 |   );
25 | };
26 | const render = window.g_plugins.compose('render', { initialValue: oldRender });
27 | 
28 | const moduleBeforeRendererPromises = [];
29 | 
30 | Promise.all(moduleBeforeRendererPromises).then(() => {
31 |   render();
32 | }).catch((err) => {
33 |   window.console && window.console.error(err);
34 | });
35 | 
36 | require('../../global.less');
37 | 
38 | // hot module replacement
39 | if (module.hot) {
40 |   module.hot.accept('./router', () => {
41 |     oldRender();
42 |   });
43 | }
44 | 


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


--------------------------------------------------------------------------------
/src/Home/less/content11.less:
--------------------------------------------------------------------------------
 1 | @content11: content11;
 2 | .@{content11}-wrapper {
 3 |   height: 480px;
 4 |   background: url("https://gw.alipayobjects.com/zos/rmsportal/ZsWYzLOItgeaWDSsXdZd.svg") no-repeat bottom;
 5 |   background-size: cover;
 6 |   background-size: 100%;
 7 |   margin: 0 auto;
 8 |   overflow: hidden;
 9 |   padding-top: 96px;
10 |   &.home-page-wrapper {
11 |     .title-wrapper {
12 |       margin-bottom: 32px;
13 |     }
14 |   }
15 |   .button {
16 |     box-shadow: 0 8px 16px #0554b7;
17 |     background: linear-gradient(to right, #05cbff, #1e5aff) !important;
18 |     height: 42px;
19 |     line-height: 42px;
20 |     font-size: 14px;
21 |     border: 0;
22 |     border-radius: 21px;
23 |     color: #fff;
24 |     width: 128px;
25 |     padding: 0 15px;
26 |     display: inline-block;
27 |     transition: transform .3s, box-shadow .3s;
28 |     &:hover {
29 |       transform: translateY(-4px);
30 |       box-shadow: 0 12px 20px #0554b7;
31 |     }
32 |     &:active {
33 |       transform: translateY(4px);
34 |       box-shadow: 0 4px 8px #0554b7;
35 |     }
36 |   }
37 |   .title-content {
38 |     line-height: 32px;
39 |   }
40 | }
41 | 
42 | @media screen and (max-width: 767px) {
43 |   .@{content11}-wrapper {
44 |     padding-bottom: 0;
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/pages/.umi/router.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Router as DefaultRouter, Route, Switch } from 'react-router-dom';
 3 | import dynamic from 'umi/dynamic';
 4 | import renderRoutes from 'umi/_renderRoutes';
 5 | 
 6 | 
 7 | let Router = DefaultRouter;
 8 | 
 9 | let routes = [
10 |   {
11 |     "path": "/",
12 |     "exact": true,
13 |     "component": require('../index.js').default
14 |   },
15 |   {
16 |     "component": () => React.createElement(require('/usr/local/lib/node_modules/umi/node_modules/_umi-build-dev@1.7.5@umi-build-dev/lib/plugins/404/NotFound.js').default, { pagesPath: 'src/pages', hasRoutesInConfig: false })
17 |   }
18 | ];
19 | window.g_routes = routes;
20 | window.g_plugins.applyForEach('patchRoutes', { initialValue: routes });
21 | 
22 | // route change handler
23 | function routeChangeHandler(location, action) {
24 |   window.g_plugins.applyForEach('onRouteChange', {
25 |     initialValue: {
26 |       routes,
27 |       location,
28 |       action,
29 |     },
30 |   });
31 | }
32 | window.g_history.listen(routeChangeHandler);
33 | routeChangeHandler(window.g_history.location);
34 | 
35 | export default function RouterWrapper() {
36 |   return (
37 | <Router history={window.g_history}>
38 |       { renderRoutes(routes, {}) }
39 |     </Router>
40 |   );
41 | }
42 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <link rel="stylesheet" href="/umi.css">
 6 |     <meta charset="utf-8">
 7 |     <link rel="icon" href="/logo.png">
 8 |     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
 9 |     <title>XBoot前后端分离开发平台springboot 2.x iview 前后端分离_vue_集成activiti工作流 iview admin 动态数据权限 权限按钮显示 spring security
10 |         elasticsearch 分布式限流_同步锁</title>
11 |     <meta name="keywords"
12 |         content="前后端分离,xboot,iview,iview admin,前后端分离工作流,vue集成activiti工作流,elasticsearch,security,动态数据权限,springboot,分布式限流_同步锁">
13 |     <meta name="description"
14 |         content="xboot前后端分离开发平台springboot 2.x iview 前后端分离_vue_集成activiti工作流 iview admin 动态数据权限 权限按钮显示 spring security elasticsearch 分布式限流_同步锁">
15 |     <script>window.routerBase = "/";</script>
16 | </head>
17 | 
18 | <body>
19 |     <div id="root"></div>
20 |     <script src="/umi.js"></script>
21 | </body>
22 | <script>
23 |     var _hmt = _hmt || [];
24 |     (function () {
25 |         var hm = document.createElement("script");
26 |         hm.src = "https://hm.baidu.com/hm.js?b0b6ce21edb9a14bc17d2637bba9e55a";
27 |         var s = document.getElementsByTagName("script")[0];
28 |         s.parentNode.insertBefore(hm, s);
29 |     })();
30 | </script>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "landing-test",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "start": "umi dev",
 6 |     "build": "umi build",
 7 |     "lint": "eslint --ext .jsx src && tnpm run lint:style",
 8 |     "lint:style": "stylelint \"src/Home/**/*.less\" --syntax less"
 9 |   },
10 |   "dependencies": {
11 |     "antd": "^3.10.3",
12 |     "enquire-js": "^0.2.1",
13 |     "rc-banner-anim": "^2.1.0",
14 |     "rc-queue-anim": "^1.6.7",
15 |     "rc-scroll-anim": "^2.5.6",
16 |     "rc-texty": "^0.2.0",
17 |     "rc-tween-one": "^2.2.14",
18 |     "react-sublime-video": "^0.2.5",
19 |     "react": "^16.6.0",
20 |     "react-dom": "^16.6.0"
21 |   },
22 |   "devDependencies": {
23 |     "babel-eslint": "^10.0.1",
24 |     "eslint": "^4.9.0",
25 |     "eslint-config-airbnb": "latest",
26 |     "eslint-loader": "^1.9.0",
27 |     "eslint-plugin-babel": "^4.1.2",
28 |     "eslint-plugin-compat": "^2.2.0",
29 |     "eslint-plugin-import": "^2.7.0",
30 |     "eslint-plugin-jsx-a11y": "^6.0.2",
31 |     "eslint-plugin-markdown": "^1.0.0-beta.6",
32 |     "eslint-plugin-react": "^7.4.0",
33 |     "eslint-tinker": "^0.4.1",
34 |     "pre-commit": "1.x",
35 |     "stylelint": "^9.4.0",
36 |     "stylelint-config-prettier": "^4.0.0",
37 |     "stylelint-config-standard": "^18.0.0",
38 |     "umi-plugin-react": "^1.2.0"
39 |   },
40 |   "pre-commit": [
41 |     "lint"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/src/Home/Content11.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
 3 | import QueueAnim from 'rc-queue-anim';
 4 | import TweenOne from 'rc-tween-one';
 5 | 
 6 | class Content11 extends React.PureComponent {
 7 |   render() {
 8 |     const { ...props } = this.props;
 9 |     const { dataSource } = props;
10 |     delete props.dataSource;
11 |     delete props.isMobile;
12 |     return (
13 |       <OverPack {...props} {...dataSource.OverPack}>
14 |         <QueueAnim
15 |           type="bottom"
16 |           leaveReverse
17 |           key="page"
18 |           delay={[0, 100]}
19 |           {...dataSource.titleWrapper}
20 |         >
21 |           {dataSource.titleWrapper.children.map((item, i) =>
22 |             React.createElement(
23 |               item.name.indexOf('title') === 0 ? 'h1' : 'div',
24 |               { key: i.toString(), ...item },
25 |               typeof item.children === 'string' &&
26 |               item.children.match(/\.(svg|gif|jpg|jpeg|png|JPG|PNG|GIF|JPEG)$/)
27 |                 ? React.createElement('img', { src: item.children, alt: 'img' })
28 |                 : item.children
29 |             )
30 |           )}
31 |         </QueueAnim>
32 |         <TweenOne
33 |           key="button"
34 |           style={{ textAlign: 'center' }}
35 |           {...dataSource.button}
36 |           animation={{ y: 30, opacity: 0, type: 'from', delay: 300 }}
37 |         >
38 |           <a {...dataSource.button.children.a}>
39 |             {dataSource.button.children.a.children}
40 |           </a>
41 |         </TweenOne>
42 |       </OverPack>
43 |     );
44 |   }
45 | }
46 | 
47 | export default Content11;
48 | 


--------------------------------------------------------------------------------
/src/Home/less/footer1.less:
--------------------------------------------------------------------------------
 1 | .footer1-wrapper {
 2 |   background: @template-bg-color;
 3 |   overflow: hidden;
 4 |   position: relative;
 5 |   min-height: 400px;
 6 |   color: @template-footer-text-color;
 7 |   .footer1 {
 8 |     .home-page {
 9 |       padding: 64px 24px 80px;
10 |     }
11 |     .block {
12 |       padding: 0 32px;
13 |       .logo {
14 |         max-width: 180px;
15 |       }
16 |       .slogan {
17 |         font-size: 12px;
18 |         margin-top: -20px;
19 |       }
20 |       >h2 {
21 |         margin-bottom: 24px;
22 |         color: @template-text-color;
23 |       }
24 |       >div {
25 |         line-height: 24px;
26 |         a {
27 |           color: @template-footer-text-color;
28 |           &:hover {
29 |             color: @primary-color;
30 |           }
31 |         }
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: 100px;
44 |       text-align: right;
45 |       line-height: 80px;
46 |       float: right;
47 |     }
48 |   }
49 | }
50 | 
51 | @media screen and (max-width: 767px) {
52 |   .footer1 {
53 |     height: 550px;
54 |     >ul {
55 |       width: 90%;
56 |       margin: 20px auto 0;
57 |       padding: 10px 0;
58 |       >li {
59 |         width: 100%;
60 |         h2 {
61 |           margin-bottom: 10px;
62 |         }
63 |         li {
64 |           display: inline-block;
65 |           margin-right: 10px;
66 |         }
67 |       }
68 |     }
69 |     .copyright {
70 |       span {
71 |         width: 90%;
72 |       }
73 |     }
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/src/Home/Banner0.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Button, Icon } from 'antd';
 3 | import QueueAnim from 'rc-queue-anim';
 4 | import TweenOne from 'rc-tween-one';
 5 | 
 6 | class Banner extends React.PureComponent {
 7 |   render() {
 8 |     const { ...currentProps } = this.props;
 9 |     const { dataSource } = currentProps;
10 |     delete currentProps.dataSource;
11 |     delete currentProps.isMobile;
12 |     return (
13 |       <div {...currentProps} {...dataSource.wrapper}>
14 |         <QueueAnim
15 |           key="QueueAnim"
16 |           type={['bottom', 'top']}
17 |           delay={200}
18 |           {...dataSource.textWrapper}
19 |         >
20 |           <div key="title" {...dataSource.title}>
21 |             {typeof dataSource.title.children === 'string' &&
22 |             dataSource.title.children.match(
23 |               /\.(svg|gif|jpg|jpeg|png|JPG|PNG|GIF|JPEG)$/
24 |             ) ? (
25 |               <img src={dataSource.title.children} width="100%" alt="img" />
26 |             ) : (
27 |               dataSource.title.children
28 |             )}
29 |           </div>
30 |           <div key="content" {...dataSource.content}>
31 |             {dataSource.content.children}
32 |           </div>
33 |           <Button ghost key="button" href={dataSource.button.href} target="true" {...dataSource.button}>
34 |             {dataSource.button.children}
35 |           </Button>
36 |         </QueueAnim>
37 |         <TweenOne
38 |           animation={{
39 |             y: '-=20',
40 |             yoyo: true,
41 |             repeat: -1,
42 |             duration: 1000,
43 |           }}
44 |           className="banner0-icon"
45 |           key="icon"
46 |         >
47 |           <Icon type="down" />
48 |         </TweenOne>
49 |       </div>
50 |     );
51 |   }
52 | }
53 | export default Banner;
54 | 


--------------------------------------------------------------------------------
/src/Home/less/content1.less:
--------------------------------------------------------------------------------
 1 | @content1: content1;
 2 | .@{content1}-wrapper {
 3 |   height: 360px;
 4 |   .@{content1} {
 5 |     height: 100%;
 6 |     padding: 0 24px;
 7 |     &-img {
 8 |       height: 100%;
 9 |       transform-origin: top;
10 |       padding: 0 32px;
11 |       display: flex;
12 |       align-items: center;
13 |       justify-content: center;
14 |       span {
15 |         display: block;
16 |         width: 250px;
17 |         img {
18 |           display: block;
19 |         }
20 |       }
21 |     }
22 |     &-text {
23 |       padding: 0 32px;
24 |       height: 100%;
25 |       .@{content1}-content,
26 |       .@{content1}-title {
27 |         position: relative !important;
28 |       }
29 |       .@{content1}-title {
30 |         font-size: 32px;
31 |         font-weight: normal;
32 |         color: #404040;
33 |         margin-top: 120px;
34 |       }
35 |       .content {
36 |         margin-top: 20px;
37 |       }
38 |     }
39 |   }
40 | }
41 | 
42 | @media screen and (max-width: 767px) {
43 |   .@{content1}-wrapper {
44 |     height: 500px;
45 |     .@{content1} {
46 |       &-img {
47 |         height: 200px;
48 |         padding: 0;
49 |         text-align: center;
50 |         margin-top: 64px;
51 |         span {
52 |           display: inline-block;
53 |           width: 180px;
54 |           height: 200px;
55 |           line-height: 200px;
56 |           margin: auto;
57 |         }
58 |       }
59 |       &-text {
60 |         height: auto;
61 |         margin-bottom: 20px;
62 |         text-align: center;
63 |         padding: 0;
64 |         .@{content1}-content,
65 |         .@{content1}-title {
66 |           width: 100%;
67 |           top: auto;
68 |         }
69 |         .@{content1}-title {
70 |           margin: 32px auto 16px;
71 |           font-size: 24px;
72 |         }
73 |       }
74 |     }
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/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 | 
 7 | class Footer extends React.Component {
 8 |   static defaultProps = {
 9 |     className: 'footer1',
10 |   };
11 | 
12 |   getLiChildren = (data) =>
13 |     data.map((item, i) => {
14 |       return (
15 |         <Col key={i.toString()} {...item} title={null} content={null}>
16 |           <h2 {...item.title}>
17 |             {typeof item.title.children === 'string' &&
18 |             item.title.children.match(
19 |               /\.(svg|gif|jpg|jpeg|png|JPG|PNG|GIF|JPEG)$/
20 |             ) ? (
21 |               <img src={item.title.children} width="100%" alt="img" />
22 |             ) : (
23 |               item.title.children
24 |             )}
25 |           </h2>
26 |           <div {...item.content}>{item.content.children}</div>
27 |         </Col>
28 |       );
29 |     });
30 | 
31 |   render() {
32 |     const { ...props } = this.props;
33 |     const { dataSource } = props;
34 |     delete props.dataSource;
35 |     delete props.isMobile;
36 |     const childrenToRender = this.getLiChildren(dataSource.block.children);
37 |     return (
38 |       <div {...props} {...dataSource.wrapper}>
39 |         <OverPack {...dataSource.OverPack}>
40 |           <QueueAnim
41 |             type="bottom"
42 |             key="ul"
43 |             leaveReverse
44 |             component={Row}
45 |             {...dataSource.block}
46 |           >
47 |             {childrenToRender}
48 |           </QueueAnim>
49 |           <TweenOne
50 |             animation={{ y: '+=30', opacity: 0, type: 'from' }}
51 |             key="copyright"
52 |             {...dataSource.copyrightWrapper}
53 |           >
54 |             <div {...dataSource.copyrightPage}>
55 |               <div {...dataSource.copyright}>
56 |                 {dataSource.copyright.children}
57 |               </div>
58 |             </div>
59 |           </TweenOne>
60 |         </OverPack>
61 |       </div>
62 |     );
63 |   }
64 | }
65 | 
66 | export default Footer;
67 | 


--------------------------------------------------------------------------------
/src/Home/less/banner0.less:
--------------------------------------------------------------------------------
 1 | @banner0: banner0;
 2 | .@{banner0} {
 3 |   // 如果在第一屏且导航位置为 relative, 一屏为 height: calc(~"100vh - 64px");
 4 |   width: 100%;
 5 |   height: 100vh;
 6 |   position: relative;
 7 |   text-align: center;
 8 |   border-color: #666;
 9 |   background-image: url("https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg");
10 |   background-size: cover;
11 |   background-attachment: fixed;
12 |   background-position: center;
13 |   & &-text-wrapper {
14 |     display: inline-block;
15 |     position: absolute;
16 |     top: 20%;
17 |     margin: auto;
18 |     left: 0;
19 |     right: 0;
20 |     font-size: 14px;
21 |     color: @template-text-color-light;
22 |     width: 550px;
23 |     >.queue-anim-leaving {
24 |       position: relative !important;
25 |     }
26 |   }
27 |   & &-title {
28 |     width: 350px;
29 |     min-height: 60px;
30 |     margin: auto;
31 |     display: inline-block;
32 |     font-size: 40px;
33 |     position: relative;
34 |   }
35 |   & &-content {
36 |     margin-bottom: 20px;
37 |     word-wrap: break-word;
38 |     min-height: 24px;
39 |   }
40 |   & &-button {
41 |     border: 1px solid #fff;
42 |     color: #fff;
43 |     background: transparent;
44 |     box-shadow: 0 0 0 transparent;
45 |     line-height: 40px;
46 |     font-size: 16px;
47 |     height: 40px;
48 |     transition: background .45s @ease-out, box-shadow .45s @ease-out;
49 |     &:hover {
50 |       color: #fff;
51 |       border-color: #fff;
52 |       background: rgba(255, 255, 255, 0.1);
53 |       box-shadow: 0 0 10px rgba(50, 250, 255, 0.75);
54 |     }
55 |     &:focus {
56 |       color: #fff;
57 |       border-color: #fff;
58 |     }
59 |     &.queue-anim-leaving {
60 |       width: auto;
61 |     }
62 |   }
63 |   & &-icon {
64 |     bottom: 20px;
65 |     font-size: 24px;
66 |     position: absolute;
67 |     left: 50%;
68 |     margin-left: -12px;
69 |     color: @template-text-color-light;
70 |   }
71 | }
72 | 
73 | @media screen and (max-width: 767px) {
74 |   .@{banner0} {
75 |     background-attachment: inherit;
76 |     & &-text-wrapper {
77 |       width: 90%;
78 |     }
79 |     & &-title {
80 |       width: 90%;
81 |       left: 0;
82 |     }
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/src/Home/Content1.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 | 
 7 | function Content1(props) {
 8 |   const { ...tagProps } = props;
 9 |   const { dataSource, isMobile } = tagProps;
10 |   delete tagProps.dataSource;
11 |   delete tagProps.isMobile;
12 |   const animType = {
13 |     queue: isMobile ? 'bottom' : 'right',
14 |     one: isMobile
15 |       ? {
16 |           scaleY: '+=0.3',
17 |           opacity: 0,
18 |           type: 'from',
19 |           ease: 'easeOutQuad',
20 |         }
21 |       : {
22 |           x: '-=30',
23 |           opacity: 0,
24 |           type: 'from',
25 |           ease: 'easeOutQuad',
26 |         },
27 |   };
28 |   return (
29 |     <div {...tagProps} {...dataSource.wrapper}>
30 |       <OverPack {...dataSource.OverPack} component={Row}>
31 |         <TweenOne
32 |           key="img"
33 |           animation={animType.one}
34 |           resetStyle
35 |           {...dataSource.imgWrapper}
36 |           component={Col}
37 |           componentProps={{
38 |             md: dataSource.imgWrapper.md,
39 |             xs: dataSource.imgWrapper.xs,
40 |           }}
41 |         >
42 |           <span {...dataSource.img}>
43 |             <img src={dataSource.img.children} width="100%" alt="img" />
44 |           </span>
45 |         </TweenOne>
46 |         <QueueAnim
47 |           key="text"
48 |           type={animType.queue}
49 |           leaveReverse
50 |           ease={['easeOutQuad', 'easeInQuad']}
51 |           {...dataSource.textWrapper}
52 |           component={Col}
53 |           componentProps={{
54 |             md: dataSource.textWrapper.md,
55 |             xs: dataSource.textWrapper.xs,
56 |           }}
57 |         >
58 |           <h2 key="h1" {...dataSource.title}>
59 |             {dataSource.title.children}
60 |           </h2>
61 |           <div key="p" {...dataSource.content}>
62 |             {dataSource.content.children}
63 |           </div>
64 |         </QueueAnim>
65 |       </OverPack>
66 |     </div>
67 |   );
68 | }
69 | 
70 | export default Content1;
71 | 


--------------------------------------------------------------------------------
/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 | 
 6 | class Content extends React.PureComponent {
 7 |   getBlockChildren = (data) =>
 8 |     data.map((item, i) => {
 9 |       const children = item.children;
10 |       return (
11 |         <Col key={i.toString()} {...item}>
12 |           <div {...children.icon}>
13 |             <img src={children.icon.children} width="100%" alt="img" />
14 |           </div>
15 |           <h3 {...children.title}>{children.title.children}</h3>
16 |           <div {...children.content}>{children.content.children}</div>
17 |         </Col>
18 |       );
19 |     });
20 | 
21 |   render() {
22 |     const { ...props } = this.props;
23 |     const { dataSource } = props;
24 |     delete props.dataSource;
25 |     delete props.isMobile;
26 |     const listChildren = this.getBlockChildren(dataSource.block.children);
27 |     return (
28 |       <div {...props} {...dataSource.wrapper}>
29 |         <div {...dataSource.page}>
30 |           <div {...dataSource.titleWrapper}>
31 |             {dataSource.titleWrapper.children.map((item, i) =>
32 |               React.createElement(
33 |                 item.name.indexOf('title') === 0 ? 'h1' : 'div',
34 |                 { key: i.toString(), ...item },
35 |                 typeof item.children === 'string' &&
36 |                 item.children.match(
37 |                   /\.(svg|gif|jpg|jpeg|png|JPG|PNG|GIF|JPEG)$/
38 |                 )
39 |                   ? React.createElement('img', {
40 |                       src: item.children,
41 |                       height: '100%',
42 |                       alt: 'img',
43 |                     })
44 |                   : item.children
45 |               )
46 |             )}
47 |           </div>
48 |           <OverPack {...dataSource.OverPack}>
49 |             <QueueAnim
50 |               type="bottom"
51 |               key="block"
52 |               leaveReverse
53 |               {...dataSource.block}
54 |               component={Row}
55 |             >
56 |               {listChildren}
57 |             </QueueAnim>
58 |           </OverPack>
59 |         </div>
60 |       </div>
61 |     );
62 |   }
63 | }
64 | 
65 | export default Content;
66 | 


--------------------------------------------------------------------------------
/src/Home/Nav0.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import TweenOne from 'rc-tween-one';
  3 | import { Menu } from 'antd';
  4 | 
  5 | const Item = Menu.Item;
  6 | 
  7 | class Header extends React.Component {
  8 |   constructor(props) {
  9 |     super(props);
 10 |     this.state = {
 11 |       phoneOpen: false,
 12 |       menuHeight: 0,
 13 |     };
 14 |     this.menu = React.createRef();
 15 |   }
 16 | 
 17 |   /*
 18 |   componentDidMount() {
 19 |     // 如果是 react 16.3 以下版本请使用 findDOMNode;
 20 |     this.menuDom = findDOMNode(this.menu);
 21 |   }
 22 |   */
 23 | 
 24 |   phoneClick = () => {
 25 |     const phoneOpen = !this.state.phoneOpen;
 26 |     this.setState({
 27 |       phoneOpen,
 28 |       menuHeight: phoneOpen ? this.menu.current.dom.scrollHeight : 0,
 29 |     });
 30 |   };
 31 | 
 32 |   render() {
 33 |     const { ...props } = this.props;
 34 |     const { dataSource, isMobile } = props;
 35 |     delete props.dataSource;
 36 |     delete props.isMobile;
 37 |     const { menuHeight, phoneOpen } = this.state;
 38 |     const navData = dataSource.Menu.children;
 39 |     const navChildren = Object.keys(navData).map((key, i) => (
 40 |       <Item key={i.toString()} {...navData[key]}>
 41 |         <a
 42 |           {...navData[key].a}
 43 |           href={navData[key].a.href}
 44 |           target={navData[key].a.target}
 45 |         >
 46 |           {navData[key].a.children}
 47 |         </a>
 48 |       </Item>
 49 |     ));
 50 |     return (
 51 |       <TweenOne
 52 |         component="header"
 53 |         animation={{ opacity: 0, type: 'from' }}
 54 |         {...dataSource.wrapper}
 55 |         {...props}
 56 |       >
 57 |         <div
 58 |           {...dataSource.page}
 59 |           className={`${dataSource.page.className}${phoneOpen ? ' open' : ''}`}
 60 |         >
 61 |           <TweenOne
 62 |             animation={{ x: -30, type: 'from', ease: 'easeOutQuad' }}
 63 |             {...dataSource.logo}
 64 |           >
 65 |             <img width="100%" src={dataSource.logo.children} alt="img" />
 66 |           </TweenOne>
 67 |           {isMobile && (
 68 |             <div
 69 |               {...dataSource.mobileMenu}
 70 |               onClick={() => {
 71 |                 this.phoneClick();
 72 |               }}
 73 |             >
 74 |               <em />
 75 |               <em />
 76 |               <em />
 77 |             </div>
 78 |           )}
 79 |           <TweenOne
 80 |             {...dataSource.Menu}
 81 |             animation={{ x: 30, type: 'from', ease: 'easeOutQuad' }}
 82 |             ref={this.menu} // {(c) => { this.menu = c; }}
 83 |             style={isMobile ? { height: menuHeight } : null}
 84 |           >
 85 |             <Menu
 86 |               mode={isMobile ? 'inline' : 'horizontal'}
 87 |               defaultSelectedKeys={['0']}
 88 |               theme={isMobile ? 'dark' : 'default'}
 89 |             >
 90 |               {navChildren}
 91 |             </Menu>
 92 |           </TweenOne>
 93 |         </div>
 94 |       </TweenOne>
 95 |     );
 96 |   }
 97 | }
 98 | 
 99 | export default Header;
100 | 


--------------------------------------------------------------------------------
/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 Nav0 from './Nav0';
  7 | import Banner0 from './Banner0';
  8 | import Content0 from './Content0';
  9 | import Content3 from './Content3';
 10 | import Content1 from './Content1';
 11 | import Content11 from './Content11';
 12 | import Footer1 from './Footer1';
 13 | 
 14 | import {
 15 |   Nav00DataSource,
 16 |   Banner00DataSource,
 17 |   Content00DataSource,
 18 |   Content30DataSource,
 19 |   Content10DataSource,
 20 |   Content110DataSource,
 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 |       <Nav0
 62 |         id="Nav0_0"
 63 |         key="Nav0_0"
 64 |         dataSource={Nav00DataSource}
 65 |         isMobile={this.state.isMobile}
 66 |       />,
 67 |       <Banner0
 68 |         id="Banner0_0"
 69 |         key="Banner0_0"
 70 |         dataSource={Banner00DataSource}
 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 |       <Content3
 80 |         id="Content3_0"
 81 |         key="Content3_0"
 82 |         dataSource={Content30DataSource}
 83 |         isMobile={this.state.isMobile}
 84 |       />,
 85 |       <Content1
 86 |         id="Content1_0"
 87 |         key="Content1_0"
 88 |         dataSource={Content10DataSource}
 89 |         isMobile={this.state.isMobile}
 90 |       />,
 91 |       <Content11
 92 |         id="Content11_0"
 93 |         key="Content11_0"
 94 |         dataSource={Content110DataSource}
 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/less/nav0.less:
--------------------------------------------------------------------------------
  1 | @header: header0;
  2 | .@{header} {
  3 |   background: @template-nav-bg-color;
  4 |   width: 100%;
  5 |   z-index: 1;
  6 |   box-shadow: 0 5px 8px fade(#000, 15);
  7 |   position: relative;
  8 |   top: 0;
  9 |   .home-page {
 10 |     padding: 0 24px;
 11 |   }
 12 |   &-logo {
 13 |     display: inline-block;
 14 |     position: relative;
 15 |     width: 150px;
 16 |     line-height: 64px;
 17 |     & img {
 18 |       vertical-align: middle;
 19 |       display: inline-block;
 20 |     }
 21 |     & a {
 22 |       display: block;
 23 |     }
 24 |   }
 25 |   &-menu {
 26 |     float: right;
 27 |     >.ant-menu {
 28 |       line-height: 62px;
 29 |       background: transparent;
 30 |       color: @template-text-color-light;
 31 |       height: 64px;
 32 |       border-bottom-color: transparent;
 33 |       position: relative;
 34 |       a {
 35 |         color: @template-text-color-light;
 36 |         &:hover {
 37 |           color: @primary-color;
 38 |         }
 39 |       }
 40 |     }
 41 |   }
 42 |   .ant-menu-item-selected a {
 43 |     color: @primary-color;
 44 |   }
 45 | }
 46 | 
 47 | @media screen and (max-width: 767px) {
 48 |   .@{header} {
 49 |     &-logo {
 50 |       z-index: 101;
 51 |     }
 52 |     &.home-page-wrapper .home-page {
 53 |       padding: 0 24px;
 54 |     }
 55 |     & &-menu {
 56 |       height: auto;
 57 |       float: inherit;
 58 |       position: relative;
 59 |       left: -24px;
 60 |       width: ~"calc(100% + 48px)";
 61 |       opacity: 0;
 62 |       transition: opacity .3s @ease-in-out, height .3s @ease-in-out;
 63 |       & li {
 64 |         padding: 0 24px;
 65 |         &.ant-menu-submenu {
 66 |           padding: 0;
 67 |         }
 68 |       }
 69 |       & .ant-menu-submenu .ant-menu-sub {
 70 |         padding: 0 24px;
 71 |       }
 72 |     }
 73 |     &-mobile-menu {
 74 |       width: 16px;
 75 |       height: 14px;
 76 |       cursor: pointer;
 77 |       position: absolute;
 78 |       top: 24px;
 79 |       right: 24px;
 80 |       z-index: 100;
 81 |       em {
 82 |         display: block;
 83 |         width: 100%;
 84 |         height: 2px;
 85 |         background: #fff;
 86 |         margin-top: 4px;
 87 |         transition: transform .3s @ease-in-out, opacity .3s @ease-in-out;
 88 |       }
 89 |       :first-child {
 90 |         margin-top: 0;
 91 |       }
 92 |     }
 93 |     .ant-menu {
 94 |       height: auto;
 95 |       overflow: hidden;
 96 | 
 97 |       background: @template-bg-color;
 98 |       .ant-menu-item-selected {
 99 |         border: none;
100 |       }
101 |       a {
102 |         color: @template-text-color-light;
103 |         &:hover {
104 |           color: @template-text-color-light;
105 |         }
106 |       }
107 |       .ant-menu-item-selected a {
108 |         color: @template-text-color-light;
109 |       }
110 |     }
111 |     & .open {
112 |       height: auto;
113 |       .@{header}-mobile-menu {
114 |         em {
115 |           &:nth-child(1) {
116 |             transform: translateY(6px) rotate(45deg);
117 |           }
118 |           &:nth-child(2) {
119 |             opacity: 0;
120 |           }
121 |           &:nth-child(3) {
122 |             transform: translateY(-6px) rotate(-45deg);
123 |           }
124 |         }
125 |       }
126 |       >.@{header}-menu {
127 |         opacity: 1;
128 |         pointer-events: auto;
129 |       }
130 |     }
131 |   }
132 | }
133 | 


--------------------------------------------------------------------------------
/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 | 
  7 | class Content3 extends React.PureComponent {
  8 |   getDelay = (e, b) => (e % b) * 100 + Math.floor(e / b) * 100 + b * 100;
  9 | 
 10 |   render() {
 11 |     const { ...props } = this.props;
 12 |     const { dataSource, isMobile } = props;
 13 |     delete props.dataSource;
 14 |     delete props.isMobile;
 15 |     let clearFloatNum = 0;
 16 |     const children = dataSource.block.children.map((item, i) => {
 17 |       const childObj = item.children;
 18 |       const delay = isMobile ? i * 50 : this.getDelay(i, 24 / item.md);
 19 |       const liAnim = {
 20 |         opacity: 0,
 21 |         type: 'from',
 22 |         ease: 'easeOutQuad',
 23 |         delay,
 24 |       };
 25 |       const childrenAnim = { ...liAnim, x: '+=10', delay: delay + 100 };
 26 |       clearFloatNum += item.md;
 27 |       clearFloatNum = clearFloatNum > 24 ? 0 : clearFloatNum;
 28 |       return (
 29 |         <TweenOne
 30 |           component={Col}
 31 |           animation={liAnim}
 32 |           key={item.name}
 33 |           {...item}
 34 |           componentProps={{ md: item.md, xs: item.xs }}
 35 |           className={
 36 |             !clearFloatNum
 37 |               ? `${item.className || ''} clear-both`.trim()
 38 |               : item.className
 39 |           }
 40 |         >
 41 |           <TweenOne
 42 |             animation={{
 43 |               x: '-=10',
 44 |               opacity: 0,
 45 |               type: 'from',
 46 |               ease: 'easeOutQuad',
 47 |             }}
 48 |             key="img"
 49 |             {...childObj.icon}
 50 |           >
 51 |             <img src={childObj.icon.children} width="100%" alt="img" />
 52 |           </TweenOne>
 53 |           <div {...childObj.textWrapper}>
 54 |             <TweenOne
 55 |               key="h2"
 56 |               animation={childrenAnim}
 57 |               component="h2"
 58 |               {...childObj.title}
 59 |             >
 60 |               {childObj.title.children}
 61 |             </TweenOne>
 62 |             <TweenOne
 63 |               key="p"
 64 |               animation={{ ...childrenAnim, delay: delay + 200 }}
 65 |               component="div"
 66 |               {...childObj.content}
 67 |             >
 68 |               {childObj.content.children}
 69 |             </TweenOne>
 70 |           </div>
 71 |         </TweenOne>
 72 |       );
 73 |     });
 74 |     return (
 75 |       <div {...props} {...dataSource.wrapper}>
 76 |         <div {...dataSource.page}>
 77 |           <div {...dataSource.titleWrapper}>
 78 |             {dataSource.titleWrapper.children.map((item, i) =>
 79 |               React.createElement(
 80 |                 item.name.indexOf('title') === 0 ? 'h1' : 'div',
 81 |                 { key: i.toString(), ...item },
 82 |                 typeof item.children === 'string' &&
 83 |                 item.children.match(
 84 |                   /\.(svg|gif|jpg|jpeg|png|JPG|PNG|GIF|JPEG)$/
 85 |                 )
 86 |                   ? React.createElement('img', {
 87 |                       src: item.children,
 88 |                       alt: 'img',
 89 |                     })
 90 |                   : item.children
 91 |               )
 92 |             )}
 93 |           </div>
 94 |           <OverPack {...dataSource.OverPack}>
 95 |             <QueueAnim key="u" type="bottom">
 96 |               <Row key="row" {...dataSource.block}>
 97 |                 {children}
 98 |               </Row>
 99 |             </QueueAnim>
100 |           </OverPack>
101 |         </div>
102 |       </div>
103 |     );
104 |   }
105 | }
106 | 
107 | export default Content3;
108 | 


--------------------------------------------------------------------------------
/src/Home/data.source.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | export const Nav00DataSource = {
  3 |   wrapper: { className: 'header0 home-page-wrapper' },
  4 |   page: { className: 'home-page' },
  5 |   logo: {
  6 |     className: 'header0-logo',
  7 |     children: 'https://i.loli.net/2019/03/25/5c984c1120873.png',
  8 |   },
  9 |   Menu: {
 10 |     className: 'header0-menu',
 11 |     children: [
 12 |       { name: 'item0', a: { children: '官网', href: 'http://xb.exrick.cn' } },
 13 |       {
 14 |         name: 'item1',
 15 |         a: {
 16 |           children: '在线演示',
 17 |           href: 'http://xboot.exrick.cn',
 18 |           target: '_black',
 19 |         },
 20 |       },
 21 |       {
 22 |         name: 'item2',
 23 |         a: {
 24 |           children: '开发文档',
 25 |           href: 'https://www.kancloud.cn/exrick/xboot/content',
 26 |           target: '_black',
 27 |         },
 28 |       },
 29 |       {
 30 |         name: 'item3',
 31 |         a: {
 32 |           children: '获取完整版',
 33 |           href: 'http://xpay.exrick.cn/pay?xboot',
 34 |           target: '_black',
 35 |         },
 36 |       },
 37 |       {
 38 |         name: 'item4',
 39 |         a: {
 40 |           children: '商用授权',
 41 |           href: 'http://wpa.qq.com/msgrd?v=3&uin=1012139570&site=qq&menu=yes',
 42 |           target: '_black',
 43 |         },
 44 |       },
 45 |     ],
 46 |   },
 47 |   mobileMenu: { className: 'header0-mobile-menu' },
 48 | };
 49 | export const Banner00DataSource = {
 50 |   wrapper: { className: 'banner0' },
 51 |   textWrapper: { className: 'banner0-text-wrapper' },
 52 |   title: {
 53 |     className: 'banner0-title jtnstd5q52-editor_css',
 54 |     children: 'https://i.loli.net/2019/04/01/5ca1b48e23ac4.png',
 55 |   },
 56 |   content: {
 57 |     className: 'banner0-content',
 58 |     children: (
 59 |       <span>
 60 |         <p>XBoot前后端分离快速开发平台</p>
 61 |       </span>
 62 |     ),
 63 |   },
 64 |   button: {
 65 |     className: 'banner0-button jtntac62itf-editor_css',
 66 |     href: "http://xboot.exrick.cn",
 67 |     children: (
 68 |       <span>
 69 |         <p>立即体验</p>
 70 |       </span>
 71 |     )
 72 |   },
 73 | };
 74 | export const Content00DataSource = {
 75 |   wrapper: { className: 'home-page-wrapper content0-wrapper' },
 76 |   page: { className: 'home-page content0' },
 77 |   OverPack: { playScale: 0.3, className: '' },
 78 |   titleWrapper: {
 79 |     className: 'title-wrapper',
 80 |     children: [
 81 |       {
 82 |         name: 'title',
 83 |         children: (
 84 |           <span>
 85 |             <p>框架特性</p>
 86 |           </span>
 87 |         ),
 88 |       },
 89 |     ],
 90 |   },
 91 |   block: {
 92 |     className: 'block-wrapper',
 93 |     children: [
 94 |       {
 95 |         name: 'block0',
 96 |         className: 'block',
 97 |         md: 8,
 98 |         xs: 24,
 99 |         children: {
100 |           icon: {
101 |             className: 'icon',
102 |             children:
103 |               'https://zos.alipayobjects.com/rmsportal/WBnVOjtIlGWbzyQivuyq.png',
104 |           },
105 |           title: {
106 |             className: 'content0-title',
107 |             children: (
108 |               <span>
109 |                 <p>快速开发</p>
110 |               </span>
111 |             ),
112 |           },
113 |           content: {
114 |             children: (
115 |               <span>
116 |                 <p>Java、Vue、SQL代码生成效率翻四倍</p>
117 |               </span>
118 |             ),
119 |           },
120 |         },
121 |       },
122 |       {
123 |         name: 'block1',
124 |         className: 'block',
125 |         md: 8,
126 |         xs: 24,
127 |         children: {
128 |           icon: {
129 |             className: 'icon',
130 |             children:
131 |               'https://zos.alipayobjects.com/rmsportal/YPMsLQuCEXtuEkmXTTdk.png',
132 |           },
133 |           title: {
134 |             className: 'content0-title',
135 |             children: (
136 |               <span>
137 |                 <p>Activiti工作流</p>
138 |               </span>
139 |             ),
140 |           },
141 |           content: {
142 |             children: (
143 |               <span>
144 |                 <p>前后端分离集成十分完整、简单配置的工作流</p>
145 |               </span>
146 |             ),
147 |           },
148 |         },
149 |       },
150 |       {
151 |         name: 'block2',
152 |         className: 'block',
153 |         md: 8,
154 |         xs: 24,
155 |         children: {
156 |           icon: {
157 |             className: 'icon',
158 |             children:
159 |               'https://zos.alipayobjects.com/rmsportal/EkXWVvAaFJKCzhMmQYiX.png',
160 |           },
161 |           title: {
162 |             className: 'content0-title',
163 |             children: (
164 |               <span>
165 |                 <p>权限管理</p>
166 |               </span>
167 |             ),
168 |           },
169 |           content: {
170 |             children: (
171 |               <span>
172 |                 <p>动态权限管理、多维度轻松控制权限按钮显示</p>
173 |               </span>
174 |             ),
175 |           },
176 |         },
177 |       },
178 |     ],
179 |   },
180 | };
181 | export const Content30DataSource = {
182 |   wrapper: { className: 'home-page-wrapper content3-wrapper' },
183 |   page: { className: 'home-page content3' },
184 |   OverPack: { playScale: 0.3 },
185 |   titleWrapper: {
186 |     className: 'title-wrapper',
187 |     children: [
188 |       {
189 |         name: 'title',
190 |         children: (
191 |           <span>
192 |             <p>完整版及商用版提供服务</p>
193 |           </span>
194 |         ),
195 |         className: 'title-h1',
196 |       },
197 |       {
198 |         name: 'content',
199 |         className: 'title-content',
200 |         children: (
201 |           <span>
202 |             <p>基于GitLab提供永久免费更新维护</p>
203 |           </span>
204 |         ),
205 |       },
206 |     ],
207 |   },
208 |   block: {
209 |     className: 'content3-block-wrapper',
210 |     children: [
211 |       {
212 |         name: 'block0',
213 |         className: 'content3-block',
214 |         md: 8,
215 |         xs: 24,
216 |         children: {
217 |           icon: {
218 |             className: 'content3-icon',
219 |             children:
220 |               'https://zos.alipayobjects.com/rmsportal/ScHBSdwpTkAHZkJ.png',
221 |           },
222 |           textWrapper: { className: 'content3-text' },
223 |           title: {
224 |             className: 'content3-title',
225 |             children: (
226 |               <span>
227 |                 <p>消息管理</p>
228 |               </span>
229 |             ),
230 |           },
231 |           content: {
232 |             className: 'content3-content',
233 |             children: (
234 |               <span>
235 |                 <p>基于WebSocket实现站内消息实时推送与管理。</p>
236 |               </span>
237 |             ),
238 |           },
239 |         },
240 |       },
241 |       {
242 |         name: 'block1',
243 |         className: 'content3-block',
244 |         md: 8,
245 |         xs: 24,
246 |         children: {
247 |           icon: {
248 |             className: 'content3-icon',
249 |             children:
250 |               'https://zos.alipayobjects.com/rmsportal/NKBELAOuuKbofDD.png',
251 |           },
252 |           textWrapper: { className: 'content3-text' },
253 |           title: {
254 |             className: 'content3-title',
255 |             children: (
256 |               <span>
257 |                 <p>社交账号管理</p>
258 |               </span>
259 |             ),
260 |           },
261 |           content: {
262 |             className: 'content3-content',
263 |             children: (
264 |               <span>
265 |                 <p>
266 |                   支持多种第三社交账号登录，不干涉原用户数据，实现第三方账号管理。
267 |                 </p>
268 |               </span>
269 |             ),
270 |           },
271 |         },
272 |       },
273 |       {
274 |         name: 'block2',
275 |         className: 'content3-block',
276 |         md: 8,
277 |         xs: 24,
278 |         children: {
279 |           icon: {
280 |             className: 'content3-icon',
281 |             children:
282 |               'https://zos.alipayobjects.com/rmsportal/xMSBjgxBhKfyMWX.png',
283 |           },
284 |           textWrapper: { className: 'content3-text' },
285 |           title: {
286 |             className: 'content3-title',
287 |             children: (
288 |               <span>
289 |                 <p>文件管理</p>
290 |               </span>
291 |             ),
292 |           },
293 |           content: {
294 |             className: 'content3-content',
295 |             children: (
296 |               <span>
297 |                 <p>
298 |                   支持本地或第三方阿里云、腾讯云、七牛云文件存储服务，可动态任意切换。
299 |                 </p>
300 |               </span>
301 |             ),
302 |           },
303 |         },
304 |       },
305 |       {
306 |         name: 'block3',
307 |         className: 'content3-block',
308 |         md: 8,
309 |         xs: 24,
310 |         children: {
311 |           icon: {
312 |             className: 'content3-icon',
313 |             children:
314 |               'https://zos.alipayobjects.com/rmsportal/MNdlBNhmDBLuzqp.png',
315 |           },
316 |           textWrapper: { className: 'content3-text' },
317 |           title: {
318 |             className: 'content3-title',
319 |             children: (
320 |               <span>
321 |                 <p>工作流</p>
322 |               </span>
323 |             ),
324 |           },
325 |           content: {
326 |             className: 'content3-content',
327 |             children: (
328 |               <span>
329 |                 <p>集成完整简单使用的Activiti工作流，省去大量繁杂配置。</p>
330 |               </span>
331 |             ),
332 |           },
333 |         },
334 |       },
335 |       {
336 |         name: 'block4',
337 |         className: 'content3-block',
338 |         md: 8,
339 |         xs: 24,
340 |         children: {
341 |           icon: {
342 |             className: 'content3-icon',
343 |             children:
344 |               'https://zos.alipayobjects.com/rmsportal/UsUmoBRyLvkIQeO.png',
345 |           },
346 |           textWrapper: { className: 'content3-text' },
347 |           title: {
348 |             className: 'content3-title',
349 |             children: (
350 |               <span>
351 |                 <p>Vue代码生成</p>
352 |               </span>
353 |             ),
354 |           },
355 |           content: {
356 |             className: 'content3-content',
357 |             children: (
358 |               <span>
359 |                 <p>
360 |                   一键生成Vue表格或树形操作代码，无需依赖数据库，随时随地生成。
361 |                 </p>
362 |               </span>
363 |             ),
364 |           },
365 |         },
366 |       },
367 |       {
368 |         name: 'block5',
369 |         className: 'content3-block',
370 |         md: 8,
371 |         xs: 24,
372 |         children: {
373 |           icon: {
374 |             className: 'content3-icon',
375 |             children:
376 |               'https://zos.alipayobjects.com/rmsportal/ipwaQLBLflRfUrg.png',
377 |           },
378 |           textWrapper: { className: 'content3-text' },
379 |           title: {
380 |             className: 'content3-title',
381 |             children: (
382 |               <span>
383 |                 <p>丰富模版组件</p>
384 |               </span>
385 |             ),
386 |           },
387 |           content: {
388 |             className: 'content3-content',
389 |             children: (
390 |               <span>
391 |                 <p>
392 |                   一站式开发平台，提供前后台使用业务组件以及前端产品级组件。
393 |                 </p>
394 |               </span>
395 |             ),
396 |           },
397 |         },
398 |       },
399 |     ],
400 |   },
401 | };
402 | export const Content10DataSource = {
403 |   wrapper: { className: 'home-page-wrapper content1-wrapper' },
404 |   OverPack: { className: 'home-page content1', playScale: 0.3 },
405 |   imgWrapper: { className: 'content1-img', md: 10, xs: 24 },
406 |   img: {
407 |     children: 'https://zos.alipayobjects.com/rmsportal/nLzbeGQLPyBJoli.png',
408 |   },
409 |   textWrapper: { className: 'content1-text', md: 14, xs: 24 },
410 |   title: {
411 |     className: 'content1-title',
412 |     children: (
413 |       <span>
414 |         <p>XBoot Flutter APP</p>
415 |       </span>
416 |     ),
417 |   },
418 |   content: {
419 |     className: 'content1-content',
420 |     children: (
421 |       <span>
422 |         <p>基于Flutter开发的XBoot配套移动端APP开发中，敬请期待！</p>
423 |       </span>
424 |     ),
425 |   },
426 | };
427 | export const Content110DataSource = {
428 |   OverPack: {
429 |     className: 'home-page-wrapper content11-wrapper',
430 |     playScale: 0.3,
431 |   },
432 |   titleWrapper: {
433 |     className: 'title-wrapper',
434 |     children: [
435 |       {
436 |         name: 'image',
437 |         children:
438 |           'https://gw.alipayobjects.com/zos/rmsportal/PiqyziYmvbgAudYfhuBr.svg',
439 |         className: 'title-image',
440 |       },
441 |       {
442 |         name: 'title',
443 |         children: (
444 |           <span>
445 |             <p>完整版获取</p>
446 |           </span>
447 |         ),
448 |         className: 'title-h1',
449 |       },
450 |       {
451 |         name: 'content',
452 |         children: (
453 |           <span>
454 |             <p>为开发者提供完整功能源码以供参考学习</p>
455 |           </span>
456 |         ),
457 |         className: 'title-content',
458 |       },
459 |       {
460 |         name: 'content2',
461 |         children: (
462 |           <span>
463 |             <p>完整版仅供学习，不得商用</p>
464 |           </span>
465 |         ),
466 |         className: 'title-content',
467 |       },
468 |     ],
469 |   },
470 |   button: {
471 |     className: '',
472 |     children: {
473 |       a: {
474 |         className: 'button',
475 |         href: 'http://xpay.exrick.cn/pay?xboot',
476 |         children: (
477 |           <span>
478 |             <p>立即获取</p>
479 |           </span>
480 |         ),
481 |         target: '_blank',
482 |       },
483 |     },
484 |   },
485 | };
486 | export const Footer10DataSource = {
487 |   wrapper: { className: 'home-page-wrapper footer1-wrapper' },
488 |   OverPack: { className: 'footer1', playScale: 0.2 },
489 |   block: {
490 |     className: 'home-page',
491 |     children: [
492 |       {
493 |         name: 'block0',
494 |         xs: 24,
495 |         md: 6,
496 |         className: 'block',
497 |         title: {
498 |           className: 'logo',
499 |           children: 'https://i.loli.net/2019/03/25/5c984c1120873.png',
500 |         },
501 |         content: {
502 |           className: 'slogan',
503 |           children: (
504 |             <span>
505 |               <p>
506 |                 A Rapid Development Platform for Front-end and Back-end
507 |                 Separation.
508 |               </p>
509 |             </span>
510 |           ),
511 |         },
512 |       },
513 |       {
514 |         name: 'block1',
515 |         xs: 24,
516 |         md: 6,
517 |         className: 'block',
518 |         title: { children: '产品' },
519 |         content: {
520 |           children: (
521 |             <span>
522 |               <p>
523 |                 <a href="https://github.com/Exrick/x-boot" target="_blank">Github开源版本</a>
524 |               </p>
525 |               <br/>
526 |               <p>
527 |                 <a href="https://github.com/Exrick/xboot-comments/issues/3" target="_blank">更新记录 </a>
528 |               </p>
529 |               <br/>
530 |               <p>
531 |                 <a href="http://xpay.exrick.cn/pay?xboot" target="_blank">获取完整版</a>
532 |               </p>
533 |               <br/>
534 |               <p>
535 |                 <a href="http://wpa.qq.com/msgrd?v=3&uin=1012139570&site=qq&menu=yes" target="_blank">商用授权</a>
536 |               </p>
537 |               <br/>
538 |             </span>
539 |           ),
540 |         },
541 |       },
542 |       {
543 |         name: 'block2',
544 |         xs: 24,
545 |         md: 6,
546 |         className: 'block',
547 |         title: { children: '关于' },
548 |         content: {
549 |           children: (
550 |             <span>
551 |               <p>
552 |                 <a href="https://github.com/Exrick/x-boot/issues" target="_blank">FAQ</a>
553 |               </p>
554 |               <br/>
555 |               <p>
556 |                 <a href="http://wpa.qq.com/msgrd?v=3&uin=1012139570&site=qq&menu=yes" target="_blank">联系作者</a>
557 |               </p>
558 |               <br/>
559 |             </span>
560 |           ),
561 |         },
562 |       },
563 |       {
564 |         name: 'block3',
565 |         xs: 24,
566 |         md: 6,
567 |         className: 'block',
568 |         title: { children: '资源' },
569 |         content: {
570 |           children: (
571 |             <span>
572 |               <p>
573 |                 <a href="https://www.kancloud.cn/exrick/xboot/content" target="_blank">开发文档</a>
574 |               </p>
575 |               <br/>
576 |               <p>
577 |                 <a href="https://github.com/Exrick/xboot-show" target="_blank">本站源码</a>
578 |               </p>
579 |               <br/>
580 |               <p>
581 |                 <a href="https://www.iviewui.com" target="_blank">iView</a>
582 |               </p>
583 |               <br/>
584 |               <p>
585 |                 <a href="https://github.com/iview/iview-admin" target="_blank">iView Admin</a>
586 |               </p>
587 |               <br/>
588 |             </span>
589 |           ),
590 |         },
591 |       },
592 |     ],
593 |   },
594 |   copyrightWrapper: { className: 'copyright-wrapper' },
595 |   copyrightPage: { className: 'home-page' },
596 |   copyright: {
597 |     className: 'copyright',
598 |     children: (
599 |       <span>
600 |         <p>
601 |           ©2018 - Present by <a href="http://exrick.cn">Exrick</a> All Rights Reserved<br />
602 |         </p>
603 |       </span>
604 |     ),
605 |   },
606 | };
607 | 


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