put it to the zjueva.net and delete OSS

.gitignore

@@ -4,10 +4,10 @@
 /node_modules
 /.pnp
 .pnp.js
-
+/main
 # testing
 /coverage
-
+/main
 # production
 /build
 
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env.json

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 cxz66666
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -33,7 +33,7 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
 
 If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
 
 You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
 

config-overrides.js

@@ -0,0 +1,15 @@
+const { override, fixBabelImports, addLessLoader } = require('customize-cra');
+
+module.exports = override(
+    // 按需加载 antd
+    fixBabelImports('import', {
+        libraryName: 'antd',
+        libraryDirectory: 'es',
+        style: true,
+    }),
+    // 添加加载 less 的 javascriptEnabled 和 antd 的主题配置。
+    addLessLoader({
+        javascriptEnabled: true,
+        modifyVars: { '@primary-color': '#1DA57A' },
+    }),
+);

debug.log

@@ -1 +0,0 @@
-[0219/112038.789:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: The operation completed successfully. (0x0)

deploy.js

@@ -0,0 +1,46 @@
+const fs = require('fs')
+const path = require('path')
+const OSS = require('ali-oss')
+const env = require('./.env')
+
+const { region, accessKeyId, accessKeySecret, bucket } = env;
+
+const client = new OSS({
+  region,
+  accessKeyId,
+  accessKeySecret,
+  bucket,
+});
+
+const distPath = path.resolve(__dirname, './build');
+
+async function clean() {
+  console.log('[*] Getting file list');
+  const fileList = await client.list();
+  if (fileList.objects) {
+    console.log('[*] Deleting old files');
+    await client.deleteMulti(fileList.objects.map(x => x.name));
+  }
+}
+
+async function deploy(subpath = '') {
+  const dir = await fs.promises.readdir(`${distPath}${subpath}`);
+  for (i of dir) {
+    const stat = await fs.promises.stat(path.resolve(`${distPath}${subpath}`, i));
+
+    if (stat.isFile()) {
+      const fileStream = fs.createReadStream(path.resolve(`${distPath}${subpath}`, i));
+      console.log(`Uploading: ${subpath}/${i}`);
+      const result = await client.putStream(`${subpath}/${i}`, fileStream);
+    } else if (stat.isDirectory()) {
+      await deploy(`${subpath}/${i}`);
+    }
+  }
+}
+
+async function publish() {
+  await clean();
+  await deploy();
+}
+
+publish();

package.json

@@ -1,28 +1,35 @@
 {
-  "name": "my-app",
+  "name": "todolist",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
+    "antd": "^3.26.8",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "antd": "^3.26.11",
     "axios": "^0.19.2",
+    "babel-plugin-import": "^1.13.0",
+    "customize-cra": "^0.9.1",
     "enquire-js": "^0.2.1",
+    "http-proxy-middleware": "^0.20.0",
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0",
+    "rc-banner-anim": "^2.4.3",
     "rc-queue-anim": "^1.8.3",
     "rc-scroll-anim": "^2.7.4",
     "rc-texty": "^0.2.0",
+    "rc-tween-one": "^2.6.8",
     "react": "^16.12.0",
+    "react-app-rewired": "^2.1.5",
     "react-confirm-alert": "^2.4.1",
     "react-dom": "^16.12.0",
+    "react-router": "^5.2.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0"
+    "react-scripts": "3.2.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-app-rewired start",
-    "build": "react-scripts build",
+    "build": "react-app-rewired build",
-    "test": "react-scripts test",
+    "test": "react-app-rewired test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "deploy": "node deploy.js"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -38,5 +45,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "ali-oss": "^6.5.1"
   }
 }

src/App.js

@@ -1,11 +1,9 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
 import { HashRouter, Route, Switch, Link } from "react-router-dom";
-import { enquireScreen } from 'enquire-js';
+import { enquireScreen } from "enquire-js";
-import Home from './Home/main';
+import Home from "./Home/main";
 import Page2 from "./Home/history";
-
-
 import Entry from "./Entry";
 import Login from "./components/Login";
 let isMobile;
@@ -26,17 +24,17 @@ class App extends Component {
     });
   }
   render() {
-    return (<div>
+    return (
+      <div>
         <HashRouter>
           <Switch>
-          <Route exact path='/history' component={Page2} />
+            <Route exact path="/history" component={Page2} />
-          <Route exact path='/ticket' component={Entry} />
+            <Route exact path="/ticket" component={Entry} />
-          <Route exact path='/' component={Home} />
+            <Route exact path="/" component={Home} />
-          <Route exact path='/login' component={Login} />
+            <Route exact path="/login" component={Login} />
           </Switch>
         </HashRouter>
       </div>
-
     );
   }
 }

src/Home/Footer0.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import TweenOne from 'rc-tween-one';
-import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
-
-class Footer extends React.PureComponent {
-  render() {
-    const { ...props } = this.props;
-    const { dataSource } = props;
-    delete props.dataSource;
-    delete props.isMobile;
-    return (
-      <div {...props} {...dataSource.wrapper}>
-        <OverPack {...dataSource.OverPack}>
-          <TweenOne
-            animation={{ y: '+=30', opacity: 0, type: 'from' }}
-            key="footer"
-            {...dataSource.copyright}
-          >
-            {dataSource.copyright.children}
-          </TweenOne>
-        </OverPack>
-      </div>
-    );
-  }
-}
-
-export default Footer;

src/Home/Footer1.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import TweenOne from 'rc-tween-one';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import QueueAnim from 'rc-queue-anim';
+import { Row, Col } from 'antd';
+import { getChildrenToRender } from './utils';
+import { isImg } from './utils';
+
+class Footer extends React.Component {
+  static defaultProps = {
+    className: 'footer1',
+  };
+
+  getLiChildren = (data) =>
+    data.map((item, i) => {
+      const { title, childWrapper, ...itemProps } = item;
+      return (
+        <Col key={i.toString()} {...itemProps} title={null} content={null}>
+          <h2 {...title}>
+            {typeof title.children === 'string' &&
+            title.children.match(isImg) ? (
+              <img src={title.children} width="100%" alt="img" />
+            ) : (
+              title.children
+            )}
+          </h2>
+          <div {...childWrapper}>
+            {childWrapper.children.map(getChildrenToRender)}
+          </div>
+        </Col>
+      );
+    });
+
+  render() {
+    const { ...props } = this.props;
+    const { dataSource } = props;
+    delete props.dataSource;
+    delete props.isMobile;
+    const childrenToRender = this.getLiChildren(dataSource.block.children);
+    return (
+      <div {...props} {...dataSource.wrapper}>
+        <OverPack {...dataSource.OverPack}>
+          <QueueAnim
+            type="bottom"
+            key="ul"
+            leaveReverse
+            component={Row}
+            {...dataSource.block}
+          >
+            {childrenToRender}
+          </QueueAnim>
+          <TweenOne
+            animation={{ y: '+=30', opacity: 0, type: 'from' }}
+            key="copyright"
+            {...dataSource.copyrightWrapper}
+          >
+            <div {...dataSource.copyrightPage}>
+              <div {...dataSource.copyright}>
+                {dataSource.copyright.children}
+              </div>
+            </div>
+          </TweenOne>
+        </OverPack>
+      </div>
+    );
+  }
+}
+
+export default Footer;

src/Home/history.jsx

@@ -1,21 +1,21 @@
 /* eslint no-undef: 0 */
 /* eslint arrow-parens: 0 */
-import React from 'react';
+import React from "react";
-import { enquireScreen } from 'enquire-js';
+import { enquireScreen } from "enquire-js";
 
-import Content11 from './Content11';
+import Content11 from "./Content11";
-import Feature1 from './Feature1';
+import Feature1 from "./Feature1";
-import Nav3 from './Nav3';
+import Nav3 from "./Nav3";
 import {
   Nav30DataSource,
   Content110DataSource,
   Feature13DataSource,
   Feature11DataSource,
   Feature12DataSource,
-    Footer00DataSource,
+  Footer10DataSource,
-} from './data.source';
+} from "./data.source";
-import './less/antMotionStyle.less';
+import "./less/antMotionStyle.less";
-import Footer0 from './Footer0';
+import Footer1 from "./Footer1";
 let isMobile;
 enquireScreen((b) => {
   isMobile = b;
@@ -82,10 +82,10 @@ export default class Page2 extends React.Component {
         dataSource={Feature12DataSource}
         isMobile={this.state.isMobile}
       />,
-            <Footer0
+      <Footer1
-                id="Footer0_0"
+        id="Footer1_0"
-                key="Footer0_0"
+        key="Footer1_0"
-                dataSource={Footer00DataSource}
+        dataSource={Footer10DataSource}
         isMobile={this.state.isMobile}
       />,
     ];

src/Home/less/antMotionStyle.less

@@ -1,17 +1,17 @@
-@import './common.less';
+@import "./common.less";
-@import './custom.less';
+@import "./custom.less";
-@import './point.less';
+@import "./point.less";
-@import './content.less';
+@import "./content.less";
-@import './nav3.less';
+@import "./nav3.less";
-@import './banner3.less';
+@import "./banner3.less";
-@import './feature2.less';
+@import "./feature2.less";
-@import './feature1.less';
+@import "./feature1.less";
-@import './content3.less';
+@import "./content3.less";
-@import './feature8.less';
+@import "./feature8.less";
-@import './feature6.less';
+@import "./feature6.less";
-@import './content5.less';
+@import "./content5.less";
-@import './content9.less';
+@import "./content9.less";
-@import './footer0.less';
+@import "./footer1.less";
-@import './edit.less';
+@import "./edit.less";
-@import'./teams1.less';
+@import "./teams1.less";
-@import './content11.less';
+@import "./content11.less";

src/Home/less/banner3.less

@@ -40,6 +40,7 @@
   & &-name-en {
     display: block;
     font-size: 14px;
+
     line-height: 32px;
     font-weight: 400;
   }
@@ -52,11 +53,19 @@
     display: block;
     margin: 72px auto 0;
     background: rgb(3, 67, 101);
-    background: -moz-linear-gradient(left, rgba(3, 67, 101, 1) 0%, rgba(0, 27, 51, 1) 100%);
+    background: -moz-linear-gradient(
-    background: linear-gradient(to right, rgba(3, 67, 101, 1) 0%, rgba(0, 27, 51, 1) 100%);
+      left,
+      rgba(3, 67, 101, 1) 0%,
+      rgba(0, 27, 51, 1) 100%
+    );
+    background: linear-gradient(
+      to right,
+      rgba(3, 67, 101, 1) 0%,
+      rgba(0, 27, 51, 1) 100%
+    );
     box-shadow: 0 8px 16px #0a52ab;
     border: none;
-    transition: background .45s @ease-out;
+    transition: background 0.45s @ease-out;
     width: 132px;
     line-height: 42px;
     height: 42px;

src/Home/less/content5.less

@@ -20,9 +20,16 @@
           text-align: center;
           position: relative;
           overflow: hidden;
+          & img {
+            border: 1px solid #000;
+            -moz-box-shadow: 3px 3px 4px #000;
+            -webkit-box-shadow: 3px 3px 4px #000;
+            box-shadow: 3px 3px 4px #000;
+            filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');
+          }
           .page-pro();
           border: none;
-          transition: box-shadow .3s @ease-out, transform .3s @ease-out;
+          transition: box-shadow 0.3s @ease-out, transform 0.3s @ease-out;
           & > span {
             width: 100%;
             height: 200px;

src/Home/less/edit.less

@@ -9,7 +9,7 @@
 }
 #Content3_0 .ant-row > .ant-col > .k6bwkyqmmk8-editor_css {
   background-color: rgba(202, 36, 36, 0);
-  background-image: url('https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg');
+  background-image: url("https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg");
   background-attachment: scroll;
   background-blend-mode: normal;
   background-position: 0% 0%;
@@ -24,7 +24,7 @@
   color: rgb(42, 128, 202);
   text-decoration: line-through;
   background-color: rgba(195, 67, 67, 0);
-  background-image: url('https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg');
+  background-image: url("https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg");
   background-attachment: scroll;
   background-blend-mode: normal;
   background-position: 0% 0%;
@@ -58,10 +58,16 @@
   text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.35);
 }
 #Banner3_1 .banner3-text-wrapper > .k6bx9qqmas-editor_css {
-
   margin: 30px 50px 150px 100px;
   padding: 0px 0px 0px 75px;
-  background: linear-gradient(to right, red,#f97400, blue,#990adb);
+  background: linear-gradient(
+    to right,
+    #ffbe0b,
+    #fb5607,
+    #ff006e,
+    #8338ec,
+    #3a86ff
+  );
   -webkit-background-clip: text;
   color: transparent;
 }
@@ -279,3 +285,34 @@
 #Feature3_0 .ant-col > .content3-text > .k6rohgkzazi-editor_css {
   text-align: center;
 }
+#Footer1_0 .ant-col > .slogan > .kd2miilu93t-editor_css {
+  font-size: 16px;
+  top: 10px;
+}
+#Footer1_0 .ant-col > div > .kd2mqk40hca-editor_css {
+  min-width: 0px;
+  min-height: 1px;
+}
+#Footer1_0 .ant-col > .kd2mmb0w4pl-editor_css > .kd2mmt7a7qg-editor_css {
+  font-size: 16px;
+  min-height: 1px;
+  background-image: ;
+  background-attachment: ;
+  background-blend-mode: ;
+  background-position: ;
+  background-repeat: ;
+  background-size: ;
+  background-clip: ;
+}
+#Footer1_0 .ant-col > div > .kd2mmt7a7qg-editor_css {
+  background-clip: padding-box;
+  width: auto;
+  min-width: 160px;
+  height: auto;
+  min-height: 160px;
+  background-color: rgba(165, 62, 62, 0);
+}
+#Footer1_0 .ant-col > .kd2mmb0w4pl-editor_css > .kd2mqk40hca-editor_css {
+  font-size: 16px;
+  margin: 0px 0px 12px;
+}

src/Home/less/footer0.less

@@ -1,28 +0,0 @@
-.footer0-wrapper {
-  background-color: @template-bg-color;
-  height: 80px;
-  overflow: hidden;
-  .footer0 {
-    height: 100%;
-    padding: 0 24px;
-    line-height: 80px;
-    text-align: center;
-    color: @template-footer-text-color;
-    position: relative;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .footer0-wrapper {
-    .footer0 {
-      font-size: 12px;
-      &.home-page {
-        padding: 0;
-      }
-      >div {
-        width: 90%;
-        margin: auto;
-      }
-    }
-  }
-}

src/Home/less/footer1.less

@@ -0,0 +1,98 @@
+.footer1-wrapper {
+  background: @template-bg-color;
+  overflow: hidden;
+  position: relative;
+  min-height: 360px;
+  color: @template-footer-text-color;
+  .footer1 {
+    .home-page {
+      padding: 64px 24px 80px;
+    }
+  }
+  .block {
+    padding: 0 32px;
+    .logo {
+      max-width: 180px;
+    }
+    .slogan {
+      font-size: 12px;
+      margin-top: -20px;
+    }
+    >h2 {
+      margin-bottom: 24px;
+      color: @template-text-color;
+    }
+    a {
+      color: @template-footer-text-color;
+      margin-bottom: 12px;
+      float: left;
+      clear: both;
+      &:hover {
+        color: @primary-color;
+      }
+    }
+  }
+  .copyright-wrapper {
+    width: 100%;
+    border-top: 1px solid fade(@line-color, 10);
+    .home-page {
+      padding: 0 24px;
+      overflow: hidden;
+    }
+    .copyright {
+      height: 80px;
+      text-align: center;
+      line-height: 80px;
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .footer1 {
+    min-height: 550px;
+    &-wrapper {
+      .footer1 {
+        .home-page {
+          padding: 64px 24px 32px;
+        }
+      }
+    }
+    .logo {
+      margin: 0 auto 24px;
+    }
+    .block {
+      text-align: center;
+      margin-bottom: 32px;
+      padding: 0;
+    }
+    >ul {
+      width: 90%;
+      margin: 20px auto 0;
+      padding: 10px 0;
+      >li {
+        width: 100%;
+        h2 {
+          margin-bottom: 10px;
+        }
+        li {
+          display: inline-block;
+          margin-right: 10px;
+        }
+      }
+    }
+    .copyright {
+      &-wrapper {
+        .home-page {
+          padding: 0;
+          .copyright {
+            font-size: 12px;
+          }
+        }
+      }
+
+      span {
+        width: 90%;
+      }
+    }
+  }
+}

src/Home/less/nav3.less

@@ -1,7 +1,7 @@
 @header3: header3;
 
 .@{header3} {
-  background: #fff;
+  background: #d9e8fc;
   width: 100%;
   z-index: 1;
   box-shadow: 0 4px 6px fade(#000, 5);
@@ -58,7 +58,6 @@
   &-item,
   &-item-child,
   &-menu {
-
     .ant-menu-sub .ant-menu-item,
     .ant-menu-inline .ant-menu-item {
       height: auto;
@@ -111,7 +110,7 @@
       left: -24px;
       width: ~"calc(100% + 48px)";
       opacity: 0;
-      transition: opacity .3s @ease-in-out;
+      transition: opacity 0.3s @ease-in-out;
       background: #fff;
 
       & li {
@@ -143,7 +142,7 @@
         height: 2px;
         background: @template-nav-bg-color;
         margin-top: 4px;
-        transition: transform .3s @ease-in-out, opacity .3s @ease-in-out;
+        transition: transform 0.3s @ease-in-out, opacity 0.3s @ease-in-out;
       }
 
       :first-child {

src/Home/main.jsx

@@ -1,19 +1,19 @@
 /* eslint no-undef: 0 */
 /* eslint arrow-parens: 0 */
-import React from 'react';
+import React from "react";
-import { enquireScreen } from 'enquire-js';
+import { enquireScreen } from "enquire-js";
 
-import Nav3 from './Nav3';
+import Nav3 from "./Nav3";
-import Banner3 from './Banner3';
+import Banner3 from "./Banner3";
-import Feature2 from './Feature2';
+import Feature2 from "./Feature2";
-import Feature1 from './Feature1';
+import Feature1 from "./Feature1";
-import Content3 from './Content3';
+import Content3 from "./Content3";
-import Feature8 from './Feature8';
+import Feature8 from "./Feature8";
-import Feature6 from './Feature6';
+import Feature6 from "./Feature6";
-import Content5 from './Content5';
+import Content5 from "./Content5";
-import Content9 from './Content9';
+import Content9 from "./Content9";
-import Footer0 from './Footer0';
+import Footer1 from "./Footer1";
-import Point from './Point';
+import Point from "./Point";
 
 import {
   Nav30DataSource,
@@ -25,11 +25,9 @@ import {
   Feature60DataSource,
   Content50DataSource,
   Content90DataSource,
-  Footer00DataSource,
+  Footer10DataSource,
-
+} from "./data.source";
-
+import "./less/antMotionStyle.less";
-} from './data.source';
-import './less/antMotionStyle.less';
 
 let isMobile;
 enquireScreen((b) => {
@@ -122,26 +120,26 @@ export default class Home extends React.Component {
         isMobile={this.state.isMobile}
       />,
 
-      <Footer0
+      <Footer1
-        id="Footer0_0"
+        id="Footer1_0"
-        key="Footer0_0"
+        key="Footer1_0"
-        dataSource={Footer00DataSource}
+        dataSource={Footer10DataSource}
         isMobile={this.state.isMobile}
-      />, // 导航和页尾不进入锚点区，如果需要，自行添加;
+      />,
       <Point
         key="list"
         data={[
-          'Nav3_0',
+          "Nav3_0",
-          'Banner3_1',
+          "Banner3_1",
-          'Feature2_0',
+          "Feature2_0",
-          'Feature1_0',
+          "Feature1_0",
-          'Content3_0',
+          "Content3_0",
-          'Feature8_0',
+          "Feature8_0",
-          'Feature6_0',
+          "Feature6_0",
-          'Content5_0',
+          "Content5_0",
-          'Content9_0',
+          "Content9_0",
 
-          'Footer0_0',
+          "Footer0_0",
         ]}
       />,
     ];

src/footer/Footer1.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import TweenOne from 'rc-tween-one';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import QueueAnim from 'rc-queue-anim';
+import { Row, Col } from 'antd';
+import { getChildrenToRender } from './utils';
+import { isImg } from './utils';
+
+class Footer extends React.Component {
+  static defaultProps = {
+    className: 'footer1',
+  };
+
+  getLiChildren = (data) =>
+    data.map((item, i) => {
+      const { title, childWrapper, ...itemProps } = item;
+      return (
+        <Col key={i.toString()} {...itemProps} title={null} content={null}>
+          <h2 {...title}>
+            {typeof title.children === 'string' &&
+            title.children.match(isImg) ? (
+              <img src={title.children} width="100%" alt="img" />
+            ) : (
+              title.children
+            )}
+          </h2>
+          <div {...childWrapper}>
+            {childWrapper.children.map(getChildrenToRender)}
+          </div>
+        </Col>
+      );
+    });
+
+  render() {
+    const { ...props } = this.props;
+    const { dataSource } = props;
+    delete props.dataSource;
+    delete props.isMobile;
+    const childrenToRender = this.getLiChildren(dataSource.block.children);
+    return (
+      <div {...props} {...dataSource.wrapper}>
+        <OverPack {...dataSource.OverPack}>
+          <QueueAnim
+            type="bottom"
+            key="ul"
+            leaveReverse
+            component={Row}
+            {...dataSource.block}
+          >
+            {childrenToRender}
+          </QueueAnim>
+          <TweenOne
+            animation={{ y: '+=30', opacity: 0, type: 'from' }}
+            key="copyright"
+            {...dataSource.copyrightWrapper}
+          >
+            <div {...dataSource.copyrightPage}>
+              <div {...dataSource.copyright}>
+                {dataSource.copyright.children}
+              </div>
+            </div>
+          </TweenOne>
+        </OverPack>
+      </div>
+    );
+  }
+}
+
+export default Footer;

src/footer/data.source.js

@@ -0,0 +1,208 @@
+import React from 'react';
+export const Footer10DataSource = {
+  wrapper: { className: 'home-page-wrapper footer1-wrapper' },
+  OverPack: { className: 'footer1', playScale: 0.2 },
+  block: {
+    className: 'home-page',
+    gutter: 0,
+    children: [
+      {
+        name: 'block0',
+        xs: 24,
+        md: 6,
+        className: 'block',
+        title: {
+          className: 'logo',
+          children: (
+            <span>
+              <p>
+                想要了解更多？<br />
+              </p>
+            </span>
+          ),
+        },
+        childWrapper: {
+          className: 'slogan',
+          children: [
+            {
+              name: 'content0',
+              children: (
+                <span>
+                  <span>
+                    <span>
+                      <span>
+                        <span>
+                          <span>
+                            <p>
+                              <br />
+                            </p>
+                            <p>
+                              快动动手指&nbsp; <b>E键关注</b>
+                            </p>
+                            <p>
+                              <br />
+                            </p>
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                </span>
+              ),
+              className: 'kd2miilu93t-editor_css',
+            },
+          ],
+        },
+      },
+      {
+        name: 'block2',
+        xs: 24,
+        md: 6,
+        className: 'block',
+        title: {
+          children: (
+            <span>
+              <span>
+                <span>
+                  <p>QQ</p>
+                </span>
+              </span>
+            </span>
+          ),
+        },
+        childWrapper: {
+          children: [
+            {
+              href: '#',
+              name: 'link0',
+              children: (
+                <span>
+                  <span>
+                    <span>
+                      <span>
+                        <p>亦可：1796452364</p>
+                      </span>
+                    </span>
+                  </span>
+                </span>
+              ),
+              className: 'kd2mmt7a7qg-editor_css',
+            },
+            {
+              href: '#',
+              name: 'link1',
+              children: (
+                <span>
+                  <span>
+                    <span>
+                      <p>纳新咨询群：111111111</p>
+                    </span>
+                  </span>
+                </span>
+              ),
+              className: 'kd2mqk40hca-editor_css',
+            },
+          ],
+        },
+      },
+      {
+        name: 'block~kd2muekobzl',
+        xs: 24,
+        md: 6,
+        className: 'block',
+        title: {
+          children: (
+            <span>
+              <span>
+                <p>微信公众号</p>
+              </span>
+            </span>
+          ),
+        },
+        childWrapper: {
+          children: [
+            {
+              href: '#',
+              name: 'link0',
+              children: (
+                <span>
+                  <span>
+                    <span>
+                      <span>
+                        <span>
+                          <span>
+                            <span>
+                              <span>
+                                <span>
+                                  <p>
+                                    <br />
+                                  </p>
+                                </span>
+                              </span>
+                            </span>
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                </span>
+              ),
+              className: 'kd2mmt7a7qg-editor_css',
+            },
+          ],
+        },
+      },
+      {
+        name: 'block~kd2muff5cyp',
+        xs: 24,
+        md: 6,
+        className: 'block',
+        title: {
+          children: (
+            <span>
+              <span>
+                <span>
+                  <span>
+                    <p>Bilibili&nbsp;</p>
+                  </span>
+                </span>
+              </span>
+            </span>
+          ),
+        },
+        childWrapper: {
+          children: [
+            {
+              href: '#',
+              name: 'link0',
+              children: (
+                <span>
+                  <span>
+                    <span>
+                      <span>
+                        <p>
+                          <br />
+                        </p>
+                      </span>
+                    </span>
+                  </span>
+                </span>
+              ),
+              className: 'kd2mmt7a7qg-editor_css',
+            },
+          ],
+        },
+      },
+    ],
+  },
+  copyrightWrapper: { className: 'copyright-wrapper' },
+  copyrightPage: { className: 'home-page' },
+  copyright: {
+    className: 'copyright',
+    children: (
+      <span>
+        ©2020 浙江大学学生E志者协会 All Rights Reserved<br />
+      </span>
+    ),
+  },
+};

src/footer/documentation.md

@@ -0,0 +1,4 @@
+# 如何使用：
+
+- umi 里如何使用[请查看](https://landing.ant.design/docs/use/umi)。
+- 其它脚手架使用[请查看](https://landing.ant.design/docs/use/getting-started)。

src/footer/index.jsx

@@ -0,0 +1,67 @@
+/* eslint no-undef: 0 */
+/* eslint arrow-parens: 0 */
+import React from 'react';
+import { enquireScreen } from 'enquire-js';
+
+import Footer1 from './Footer1';
+
+import { Footer10DataSource } from './data.source';
+import './less/antMotionStyle.less';
+
+let isMobile;
+enquireScreen((b) => {
+  isMobile = b;
+});
+
+const { location = {} } = typeof window !== 'undefined' ? window : {};
+
+export default class Home extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isMobile,
+      show: !location.port, // 如果不是 dva 2.0 请删除
+    };
+  }
+
+  componentDidMount() {
+    // 适配手机屏幕;
+    enquireScreen((b) => {
+      this.setState({ isMobile: !!b });
+    });
+    // dva 2.0 样式在组件渲染之后动态加载，导致滚动组件不生效；线上不影响；
+    /* 如果不是 dva 2.0 请删除 start */
+    if (location.port) {
+      // 样式 build 时间在 200-300ms 之间;
+      setTimeout(() => {
+        this.setState({
+          show: true,
+        });
+      }, 500);
+    }
+    /* 如果不是 dva 2.0 请删除 end */
+  }
+
+  render() {
+    const children = [
+      <Footer1
+        id="Footer1_0"
+        key="Footer1_0"
+        dataSource={Footer10DataSource}
+        isMobile={this.state.isMobile}
+      />,
+    ];
+    return (
+      <div
+        className="templates-wrapper"
+        ref={(d) => {
+          this.dom = d;
+        }}
+      >
+        {/* 如果不是 dva 2.0 替换成 {children} start */}
+        {this.state.show && children}
+        {/* 如果不是 dva 2.0 替换成 {children} end */}
+      </div>
+    );
+  }
+}

src/footer/less/antMotionStyle.less

@@ -0,0 +1,5 @@
+@import './common.less';
+@import './custom.less';
+@import './content.less';
+@import './footer1.less';
+@import './edit.less';

src/footer/less/common.less

@@ -0,0 +1,42 @@
+
+// @import "~antd/lib/style/v2-compatible-reset.less";
+
+body {
+  word-wrap: break-word;
+}
+
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+
+/* .content-wrapper > .tween-one-leaving,
+.queue-anim-leaving {
+  // position: absolute !important;
+  // width: 100%;
+} */
+
+.video {
+  max-width: 800px;
+}
+
+#react-content {
+  min-height: 100%;
+}
+.home-page-wrapper p {
+  padding: 0;
+  margin: 0;
+}

src/footer/less/content.less

@@ -0,0 +1,44 @@
+@homepage: home-page;
+.@{homepage}-wrapper {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  .@{homepage} {
+    height: 100%;
+    max-width: 1200px;
+    position: relative;
+    margin: auto;
+    will-change: transform;
+  }
+  .title-wrapper > h1, > h1 {
+    font-size: 32px;
+    color: @text-color;
+    margin-bottom: 16px;
+  }
+  .title-wrapper {
+    margin: 0 auto 64px;
+    text-align: center;
+  }
+}
+
+.@{homepage} {
+  padding: 128px 24px;
+}
+
+@media screen and (max-width: 767px) {
+  .@{homepage}-wrapper {
+    .@{homepage} {
+      padding: 56px 24px;
+      >h1 {
+        font-size: 24px;
+        margin: 0 auto 32px;
+        &.title-h1 {
+          margin-bottom: 8px;
+        }
+      }
+      >p {
+        margin-bottom: 32px;
+      }
+    }
+  }
+}

src/footer/less/custom.less

@@ -0,0 +1,35 @@
+@import "~antd/lib/style/themes/default.less";
+
+@line-color: #e9e9e9;
+
+@shadow-color: rgba(0, 0, 0, 0.15);
+
+@bottom-bar-bg-color: #262626;
+@bottom-bar-line-color: #000;
+
+@template-bg-color: #001529;
+@template-bg-color-light: #ececec;
+@template-nav-bg-color: #001529;
+@template-text-color: #ccc;
+@template-text-title-color: #bcbcbc;
+@template-text-color-light: #fff;
+@template-footer-text-color: #999;
+
+@animate-duration: .45s;
+
+/* 详细页图片或框框的样式;
+*/
+.page-shadow() {
+  box-shadow: 0 5px 8px @shadow-color;
+}
+
+.page-pro() {
+  border-radius: 6px;
+  border: 1px solid @line-color;
+  transform: translateY(0);
+  transition: transform .3s @ease-out, box-shadow .3s @ease-out;
+  &:hover {
+    .page-shadow();
+    transform: translateY(-5px);
+  }
+}

src/footer/less/edit.less

@@ -0,0 +1,31 @@
+#Footer1_0 .ant-col > .slogan > .kd2miilu93t-editor_css {
+  font-size: 16px;
+  top: 10px;
+}
+#Footer1_0 .ant-col > div > .kd2mqk40hca-editor_css {
+  min-width: 0px;
+  min-height: 1px;
+}
+#Footer1_0 .ant-col > .kd2mmb0w4pl-editor_css > .kd2mmt7a7qg-editor_css {
+  font-size: 16px;
+  min-height: 1px;
+  background-image: ;
+  background-attachment: ;
+  background-blend-mode: ;
+  background-position: ;
+  background-repeat: ;
+  background-size: ;
+  background-clip: ;
+}
+#Footer1_0 .ant-col > div > .kd2mmt7a7qg-editor_css {
+  background-clip: padding-box;
+  width: auto;
+  min-width: 160px;
+  height: auto;
+  min-height: 160px;
+  background-color: rgba(165, 62, 62, 0);
+}
+#Footer1_0 .ant-col > .kd2mmb0w4pl-editor_css > .kd2mqk40hca-editor_css {
+  font-size: 16px;
+  margin: 0px 0px 12px;
+}

src/footer/less/footer1.less

@@ -0,0 +1,98 @@
+.footer1-wrapper {
+  background: @template-bg-color;
+  overflow: hidden;
+  position: relative;
+  min-height: 360px;
+  color: @template-footer-text-color;
+  .footer1 {
+    .home-page {
+      padding: 64px 24px 80px;
+    }
+  }
+  .block {
+    padding: 0 32px;
+    .logo {
+      max-width: 180px;
+    }
+    .slogan {
+      font-size: 12px;
+      margin-top: -20px;
+    }
+    >h2 {
+      margin-bottom: 24px;
+      color: @template-text-color;
+    }
+    a {
+      color: @template-footer-text-color;
+      margin-bottom: 12px;
+      float: left;
+      clear: both;
+      &:hover {
+        color: @primary-color;
+      }
+    }
+  }
+  .copyright-wrapper {
+    width: 100%;
+    border-top: 1px solid fade(@line-color, 10);
+    .home-page {
+      padding: 0 24px;
+      overflow: hidden;
+    }
+    .copyright {
+      height: 80px;
+      text-align: center;
+      line-height: 80px;
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .footer1 {
+    min-height: 550px;
+    &-wrapper {
+      .footer1 {
+        .home-page {
+          padding: 64px 24px 32px;
+        }
+      }
+    }
+    .logo {
+      margin: 0 auto 24px;
+    }
+    .block {
+      text-align: center;
+      margin-bottom: 32px;
+      padding: 0;
+    }
+    >ul {
+      width: 90%;
+      margin: 20px auto 0;
+      padding: 10px 0;
+      >li {
+        width: 100%;
+        h2 {
+          margin-bottom: 10px;
+        }
+        li {
+          display: inline-block;
+          margin-right: 10px;
+        }
+      }
+    }
+    .copyright {
+      &-wrapper {
+        .home-page {
+          padding: 0;
+          .copyright {
+            font-size: 12px;
+          }
+        }
+      }
+
+      span {
+        width: 90%;
+      }
+    }
+  }
+}

src/footer/utils.js

@@ -0,0 +1,18 @@
+
+import React from 'react';
+import { Button } from 'antd';
+
+export const isImg = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?/;
+export const getChildrenToRender = (item, i) => {
+  let tag = item.name.indexOf('title') === 0 ? 'h1' : 'div';
+  tag = item.href ? 'a' : tag;
+  let children = typeof item.children === 'string' && item.children.match(isImg)
+    ? React.createElement('img', { src: item.children, alt: 'img' })
+    : item.children;
+  if (item.name.indexOf('button') === 0 && typeof item.children === 'object') {
+    children = React.createElement(Button, {
+      ...item.children
+    });
+  }
+  return React.createElement(tag, { key: i.toString(), ...item }, children);
+};