ddl

open tecent sms and fix bug

.drone.yml

@@ -0,0 +1,57 @@
+kind: pipeline
+name: default
+
+steps:
+  - name: restore
+    image: drillster/drone-volume-cache
+    restore: true
+    mount:
+      - ./node_modules
+    volumes:
+      - name: cache
+        path: /cache
+
+  - name: install
+    image: node:12.11.1
+    commands:
+      - npm install
+
+  - name: rebuild-cache
+    image: drillster/drone-volume-cache
+    rebuild: true
+    mount:
+      - ./node_modules
+    volumes:
+      - name: cache
+        path: /cache
+
+  - name: build
+    image: node:12.11.1
+    commands:
+      - CI=false npm run build
+      - mv build main
+
+  - name: deploy
+    image: appleboy/drone-scp
+    settings:
+      host: zjueva.net
+      username: cibot
+      port: 22
+      key:
+        from_secret: cibot_front_secret
+      target: /srv/main
+      source: main
+      rm: true
+
+trigger:
+  branch:
+    - master
+  event:
+    - push
+    - pull_request
+    - rollback
+
+volumes:
+  - name: cache
+    host:
+      path: /tmp

.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,39 @@
 {
-  "name": "my-app",
+  "name": "todolist",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "antd": "^3.26.11",
+    "@alicloud/pop-core": "^1.7.9",
+    "antd": "^3.26.8",
     "axios": "^0.19.2",
+    "babel-plugin-import": "^1.13.0",
+    "co": "4",
+    "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",
+    "react-sublime-video": "^0.2.5",
+    "webpack": "4.41.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "react-app-rewired start",
+    "build": "env GENERATE_SOURCEMAP=false react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-scripts eject",
+    "deploy": "node deploy.js"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -38,5 +49,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "ali-oss": "^6.5.1"
   }
 }

public/index.html

@@ -3,11 +3,11 @@
 
 <head>
   <meta charset="utf-8" />
-  <link rel="icon" href="background.jpg" />
+  <link rel="icon" href="background.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />
-  <link rel="apple-touch-icon" href="background.jpg" />
+  <link rel="apple-touch-icon" href="background.png" />
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.js

@@ -1,13 +1,13 @@
-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 Home from './Home/main';
+import { HashRouter, Route, Switch} from "react-router-dom";
+import { enquireScreen } from "enquire-js";
+import Home from "./Home/main";
 import Page2 from "./Home/history";
-
-
 import Entry from "./Entry";
 import Login from "./components/Login";
+import ChooseTime from "./components/ChooseTime"
+
 let isMobile;
 enquireScreen((b) => {
   isMobile = b;
@@ -26,18 +26,18 @@ class App extends Component {
     });
   }
   render() {
-    return (<div>
-      <HashRouter>
-        <Switch>
-          <Route exact path='/history' component={Page2} />
-          <Route exact path='/ticket' component={Entry} />
-          <Route exact path='/' component={Home} />
-          <Route exact path='/login' component={Login} />
-
-        </Switch>
-      </HashRouter>
-    </div>
-
+    return (
+      <div>
+        <HashRouter>
+          <Switch>
+            <Route exact path="/history" component={Page2} />
+            <Route exact path="/ticket" component={Entry} />
+            <Route exact path="/" component={Home} />
+            <Route exact path="/login" component={Login} />
+            <Route exact path="/time/:guid" component={ChooseTime}/>
+          </Switch>
+        </HashRouter>
+      </div>
     );
   }
 }

src/Entry.js

@@ -1,33 +1,53 @@
-import React from 'react';
-import Sheet from './components/Sheet';
-import { BackTop,Layout} from 'antd';
-import Background from './background2.jpg';
-import UploadToOSS from './components/UploadToOSS'
+import React from "react";
+import Sheet from "./components/Sheet";
+import { BackTop, Layout } from "antd";
+import Background from "./background2.jpg";
+import UploadToOSS from "./components/UploadToOSS";
 
 class Entry extends React.Component {
   state = {
-    stuid : null,
-  }
-  setID = (value) =>{
-    this.setState({stuid:value})
-  }
+    stuid: null,
+  };
+  setID = (value) => {
+    this.setState({ stuid: value });
+  };
   render() {
     return (
-      <Layout style={{backgroundImage: `url(${Background})`}}>
-        <div style={{background:'#fff',borderRadius:20,
-        paddingTop:48, paddingLeft:24, paddingRight:24, marginTop: 24, marginLeft: 24, marginRight: 24,marginBottom:24,opacity:0.75 }} >
-          <h2 class="ant-typography" style={{ textAlign: 'center' }}>
+      <Layout style={{ backgroundImage: `url(${Background})` }}>
+        <div
+          style={{
+            background: "rgba(255,255,255,0.85)",
+            borderRadius: 20,
+            paddingTop: 48,
+            paddingLeft: 24,
+            paddingRight: 24,
+            marginTop: 24,
+            marginLeft: 24,
+            marginRight: 24,
+            marginBottom: 24,
+          }}
+        >
+          <h2 class="ant-typography" style={{ textAlign: "center" }}>
             浙江大学学生E志者协会2020年纳新报名表
           </h2>
-          <center>
+          <h4
+            class="ant-typography"
+            style={{ textAlign: "center", marginBottom: "20px" }}
+          >
+            报名截止日期：9月27日24:00
+          </h4>
+          {/* <center>
             <UploadToOSS stuid={this.state.stuid} />
           </center>
-          <Sheet setID = {this.setID} />
+          <Sheet setID={this.setID} />
           <BackTop visibilityHeight={200} />
-          <p style={{textAlign: 'center'}}>
-            浙江大学学生E志者协会©2020 Created by EVATech
-          </p>
-        </ div>
+          <h2 style={{ margin: "20px 0 20px 0", textAlign: "center" }}>
+            提交报名表后，建议您加入QQ纳新咨询群，群号:1126888868
+          </h2> */}
+          <h1>报名已经截止，感谢您的关注</h1>
+          <p style={{ textAlign: "center" }}>浙江大学学生E志者协会©2020</p>
+          <p style={{ textAlign: "center" }}>Created by EVATech</p>
+        </div>
       </Layout>
     );
   }

src/Home/Content11.jsx

@@ -22,7 +22,16 @@ class Content11 extends React.PureComponent {
         >
           {dataSource.titleWrapper.children.map(getChildrenToRender)}
         </QueueAnim>
-
+        <TweenOne
+          key="button"
+          style={{ textAlign: 'center' }}
+          {...dataSource.button}
+          animation={{ y: 30, opacity: 0, type: 'from', delay: 300 }}
+        >
+          <Button {...dataSource.button.children.a}>
+            {dataSource.button.children.a.children}
+          </Button>
+        </TweenOne>
       </OverPack>
     );
   }

src/Home/Content4.jsx

@@ -0,0 +1,62 @@
+import React from "react";
+import TweenOne from "rc-tween-one";
+import OverPack from "rc-scroll-anim/lib/ScrollOverPack";
+import VideoPlay from "react-sublime-video";
+import { getChildrenToRender } from "./utils";
+
+function Content4(props) {
+  const { ...tagProps } = props;
+  const { dataSource, isMobile } = tagProps;
+  delete tagProps.dataSource;
+  delete tagProps.isMobile;
+  const animation = {
+    y: "+=30",
+    opacity: 0,
+    type: "from",
+    ease: "easeOutQuad",
+  };
+
+  return (
+    <div {...tagProps} {...dataSource.wrapper}>
+      <div {...dataSource.page}>
+        <div key="title" {...dataSource.titleWrapper}>
+          {dataSource.titleWrapper.children.map(getChildrenToRender)}
+        </div>
+        <OverPack {...dataSource.OverPack}>
+          <TweenOne
+            key="video"
+            animation={{ ...animation, delay: 300 }}
+            {...dataSource.video}
+          >
+            {isMobile ? (
+              <iframe
+                width="100%"
+                src="//player.bilibili.com/player.html?aid=244539528&bvid=BV1rv41117UV&cid=236113571&page=1"
+                scrolling="no"
+                border="0"
+                frameborder="no"
+                framespacing="0"
+                allowfullscreen="true"
+              ></iframe>
+            ) : (
+              <iframe
+                width="100%"
+                height="650px"
+                src="//player.bilibili.com/player.html?aid=244539528&bvid=BV1rv41117UV&cid=236113571&page=1"
+                scrolling="no"
+                border="0"
+                frameborder="no"
+                framespacing="0"
+                allowfullscreen="true"
+              >
+                {" "}
+              </iframe>
+            )}
+          </TweenOne>
+        </OverPack>
+      </div>
+    </div>
+  );
+}
+
+export default Content4;

src/Home/Feature3.jsx

@@ -0,0 +1,94 @@
+import React from "react";
+import QueueAnim from "rc-queue-anim";
+import TweenOne from "rc-tween-one";
+import { Row, Col } from "antd";
+import OverPack from "rc-scroll-anim/lib/ScrollOverPack";
+import { getChildrenToRender } from "./utils";
+
+class Content31 extends React.PureComponent {
+  getDelay = (e, b) => (e % b) * 100 + Math.floor(e / b) * 100 + b * 100;
+
+  render() {
+    const { ...props } = this.props;
+    const { dataSource, isMobile } = props;
+    delete props.dataSource;
+    delete props.isMobile;
+    let clearFloatNum = 0;
+    const children = dataSource.block.children.map((item, i) => {
+      const childObj = item.children;
+      const delay = isMobile ? i * 50 : this.getDelay(i, 24 / item.md);
+      const liAnim = {
+        opacity: 0,
+        type: "from",
+        ease: "easeOutQuad",
+        delay,
+      };
+      const childrenAnim = { ...liAnim, x: "+=10", delay: delay + 100 };
+      clearFloatNum += item.md;
+      clearFloatNum = clearFloatNum > 24 ? 0 : clearFloatNum;
+      return (
+        <TweenOne
+          component={Col}
+          animation={liAnim}
+          key={item.name}
+          {...item}
+          componentProps={{ md: item.md, xs: item.xs }}
+          className={
+            !clearFloatNum
+              ? `${item.className || ""} clear-both`.trim()
+              : item.className
+          }
+        >
+          <TweenOne
+            animation={{
+              x: "-=10",
+              opacity: 0,
+              type: "from",
+              ease: "easeOutQuad",
+            }}
+            key="img"
+            {...childObj.icon}
+          >
+            <img src={childObj.icon.children} width="100%" alt="img" />
+          </TweenOne>
+          <div {...childObj.textWrapper}>
+            <TweenOne
+              key="h2"
+              animation={childrenAnim}
+              component="h2"
+              {...childObj.title}
+            >
+              {childObj.title.children}
+            </TweenOne>
+            <TweenOne
+              key="p"
+              animation={{ ...childrenAnim, delay: delay + 200 }}
+              component="div"
+              {...childObj.content}
+            >
+              {childObj.content.children}
+            </TweenOne>
+          </div>
+        </TweenOne>
+      );
+    });
+    return (
+      <div {...props} {...dataSource.wrapper}>
+        <div {...dataSource.page}>
+          <div {...dataSource.titleWrapper}>
+            {dataSource.titleWrapper.children.map(getChildrenToRender)}
+          </div>
+          <OverPack {...dataSource.OverPack}>
+            <QueueAnim key="u" type="bottom">
+              <Row key="row" {...dataSource.block}>
+                {children}
+              </Row>
+            </QueueAnim>
+          </OverPack>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Content31;

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,101 +1,105 @@
 /* eslint no-undef: 0 */
 /* eslint arrow-parens: 0 */
-import React from 'react';
-import { enquireScreen } from 'enquire-js';
-import Learnmore from "../LearnMore";
-import Content11 from './Content11';
-import Feature1 from './Feature1';
-import Nav3 from './Nav3';
+import React from "react";
+import { enquireScreen } from "enquire-js";
+
+import Content11 from "./Content11";
+import Feature1 from "./Feature1";
+import Nav3 from "./Nav3";
 import {
-    Nav30DataSource,
-    Content110DataSource,
-    Feature13DataSource,
-    Feature11DataSource,
-    Feature12DataSource,
-    Footer00DataSource,
-} from './data.source';
-import './less/antMotionStyle.less';
-import Footer0 from './Footer0';
+  Nav30DataSource,
+  Content110DataSource,
+  Feature13DataSource,
+  Feature11DataSource,
+  Feature12DataSource,
+  Footer10DataSource,
+} from "./data.source";
+import "./less/antMotionStyle.less";
+import Footer1 from "./Footer1";
 let isMobile;
 enquireScreen((b) => {
-    isMobile = b;
+  isMobile = b;
 });
 
 const { location } = window;
 
 export default class Page2 extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isMobile,
-            show: !location.port, // 如果不是 dva 2.0 请删除
-        };
-    }
+  constructor(props) {
+    super(props);
+    this.state = {
+      isMobile,
+      show: !location.port, // 如果不是 dva 2.0 请删除
+    };
+  }
 
-    componentDidMount() {
-        // 适配手机屏幕;
-        enquireScreen((b) => {
-            this.setState({ isMobile: !!b });
+  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,
         });
-        // dva 2.0 样式在组件渲染之后动态加载，导致滚动组件不生效；线上不影响；
-        /* 如果不是 dva 2.0 请删除 start */
-        if (location.port) {
-            // 样式 build 时间在 200-300ms 之间;
-            setTimeout(() => {
-                this.setState({
-                    show: true,
-                });
-            }, 500);
-        }
-        /* 如果不是 dva 2.0 请删除 end */
+      }, 500);
     }
+    /* 如果不是 dva 2.0 请删除 end */
+  }
 
-    render() {
-        const children = [
-            <Nav3
-                id="Nav3_0"
-                key="Nav3_0"
-                dataSource={Nav30DataSource}
-                isMobile={this.state.isMobile}
-            />,
-            <Content11
-                id="Content11_0"
-                key="Content11_0"
-                dataSource={Content110DataSource}
-                isMobile={this.state.isMobile}
-            />,
-            <Feature1
-                id="Feature1_0"
-                key="Feature1_0"
-                dataSource={Feature13DataSource}
-                isMobile={this.state.isMobile}
-            />,
-            <Feature1
-                id="Feature1_1"
-                key="Feature1_1"
-                dataSource={Feature11DataSource}
-                isMobile={this.state.isMobile}
-            />,
-            <Feature1
-                id="Feature1_2"
-                key="Feature1_2"
-                dataSource={Feature12DataSource}
-                isMobile={this.state.isMobile}
-            />,
-
-            <Learnmore />
-        ];
-        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>
-        );
-    }
+  render() {
+    const children = [
+      <Nav3
+        id="Nav3_0"
+        key="Nav3_0"
+        dataSource={Nav30DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <Content11
+        id="Content11_0"
+        key="Content11_0"
+        dataSource={Content110DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <Feature1
+        id="Feature1_0"
+        key="Feature1_0"
+        dataSource={Feature13DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <Feature1
+        id="Feature1_1"
+        key="Feature1_1"
+        dataSource={Feature11DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <Feature1
+        id="Feature1_2"
+        key="Feature1_2"
+        dataSource={Feature12DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <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/Home/less/antMotionStyle.less

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

src/Home/less/banner3.less

@@ -9,6 +9,7 @@
   background-image: url("https://gw.alipayobjects.com/zos/rmsportal/xTPkCNNLOnTEbGgVZOpE.jpg");
   background-size: cover;
   background-attachment: fixed;
+
   background-position: center;
   & &-text-wrapper {
     display: inline-block;
@@ -25,7 +26,7 @@
     font-size: 20px;
     line-height: 28px;
     font-weight: 400;
-    >.queue-anim-leaving {
+    > .queue-anim-leaving {
       position: relative !important;
     }
   }
@@ -40,23 +41,25 @@
   & &-name-en {
     display: block;
     font-size: 14px;
+    font-family: sans-serif;
     line-height: 32px;
     font-weight: 400;
   }
   & &-name {
     font-size: 24px;
     overflow: hidden;
-    opacity: 0.8;
+    opacity: 0.9;
+    font-family: Helvetica Neue;
   }
   & &-button {
     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: linear-gradient(to right, rgba(3, 67, 101, 1) 0%, rgba(0, 27, 51, 1) 100%);
+    background: -moz-linear-gradient(135deg, #6e8efb, #a777e3);
+    background: linear-gradient(135deg, #6e8efb, #a777e3);
     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;
@@ -64,6 +67,7 @@
   }
   & &-time {
     font-size: 14px;
+    font-family: Helvetica Neue;
     line-height: 24px;
     margin-top: 24px;
   }

src/Home/less/content4.less

@@ -0,0 +1,38 @@
+@content4: content4;
+.@{content4}-wrapper {
+  min-height: 720px;
+  background: #fafafa;
+  .@{content4} {
+    height: 100%;
+    overflow: hidden;
+    &-video {
+      border-radius: 4px;
+      overflow: hidden;
+      max-width: 800px;
+      margin: auto;
+      background: #fff;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      video {
+        display: block;
+        margin: auto;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{content4}-wrapper {
+    min-height: 350px;
+    .@{content4} {
+      overflow: hidden;
+      width: 90%;
+      margin: auto;
+      &-video {
+        top: 15%;
+        background: url("https://zos.alipayobjects.com/rmsportal/HZgzhugQZkqUwBVeNyfz.jpg")
+          no-repeat center;
+        background-size: cover;
+      }
+    }
+  }
+}

src/Home/less/content5.less

@@ -3,7 +3,7 @@
   background-color: #fafafa;
   min-height: 720px;
   .@{content5} {
-    >p {
+    > p {
       text-align: center;
     }
     &-img-wrapper {
@@ -20,9 +20,16 @@
           text-align: center;
           position: relative;
           overflow: hidden;
+          & img {
+            border: 1px solid gray;
+            -moz-box-shadow: 3px 3px 4px #000;
+            -webkit-box-shadow: 3px 3px 4px #000;
+            box-shadow: 3px 3px 4px gray;
+            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%;
@@ -34,14 +34,6 @@
   border-top-style: dashed;
 }
 #Banner3_1 .banner3-text-wrapper > .ant-btn {
-  background-color: #cf2892;
-  background-image: linear-gradient(
-    0rad,
-    rgb(255, 0, 0) 10%,
-    rgb(255, 0, 0) 29.71153846153846%,
-    #da2626 45.4223076923077%,
-    white 100%
-  );
   background-attachment: scroll;
   background-blend-mode: normal;
   background-position: 0% 0%;
@@ -49,56 +41,29 @@
   background-size: auto;
   background-clip: padding-box;
 }
-#Banner3_1 .k6bxcwa6wb-editor_css {
-  box-shadow: 5px 5px 5px #108ee9;
-}
+
 #Banner3_1 .banner3-text-wrapper > .k6bx9bxsgw-editor_css {
   background-clip: padding-box;
   text-decoration: underline;
+  font-family: Helvetica Neue;
   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);
+  text-align: center;
+  background: #bdb2ff;
   -webkit-background-clip: text;
   color: transparent;
 }
 #Banner3_1 .banner3-text-wrapper > .k6bxcnb8hlg-editor_css {
   font-family: Tahoma;
-  font-size: 23px;
+  font-size: 20px;
   font-weight: bold;
   color: #e9e9e9;
-  background-color: rgb(251, 251, 251);
-  background-image: linear-gradient(
-    225deg,
-    #f04134 12.5%,
-    #00a854 25%,
-    #108ee9 37.5%,
-    #f5317f 50%,
-    #f56a00 62.5%,
-    #7265e6 75%,
-    #ffbf00 87.5%,
-    #00a2ae 99.54%,
-    #00a2ae 100%,
-    rgb(0, 27, 51) 100%,
-    black 100%,
-    black 100%,
-    black 100%,
-    black 100%,
-    black 100%,
-    black 100%,
-    black 100%,
-    black 100%,
-    #f04134 100%,
-    #108ee9 100%,
-    black 100%
-  );
+
   background-blend-mode: normal;
   background-clip: padding-box;
-  box-shadow: 0px 8px 16px rgb(171, 21, 10);
 }
+
 #Content3_0 .ant-col > .content3-text > .k6bypeippkr-editor_css {
   margin: 0px;
 }
@@ -279,3 +244,49 @@
 #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;
+}
+#Feature3_1 .ant-col > .content3-text > .keedl4m5lk-editor_css {
+  font-size: 17px;
+}
+#Feature3_1 .ant-col > .content3-text > .keedn4gkykf-editor_css {
+  font-size: 16px;
+}
+#Feature3_1 .ant-col > .content3-text > .keedi0sp7vt-editor_css {
+  font-size: 16px;
+}
+#Feature3_1 .ant-col > .content3-text > .keedtwaja47-editor_css {
+  font-size: 16px;
+}
+#Feature3_1 .home-page > .title-wrapper > .keedh95kxlm-editor_css {
+  font-size: 34px;
+}

src/Home/less/feature31.less

@@ -0,0 +1,52 @@
+@content3: content3;
+.@{content3}-wrapper {
+  min-height: 764px;
+  .@{content3} {
+    height: 100%;
+    overflow: hidden;
+    & .title-content {
+      text-align: center;
+    }
+    &-block-wrapper {
+      position: relative;
+      .@{content3}-block {
+        display: inline-block;
+        padding: 48px 24px;
+        vertical-align: top;
+        .@{content3}-icon {
+          display: inline-block;
+          width: 15%;
+          vertical-align: top;
+        }
+        .@{content3}-text {
+          width: 85%;
+          display: inline-block;
+          padding-left: 8%;
+        }
+        &.clear-both {
+          clear: both;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{content3}-wrapper {
+    min-height: 1080px;
+    .@{content3} {
+      &-block-wrapper {
+        margin: 20px auto;
+        height: auto;
+        .@{content3}-block {
+          .@{content3}-title {
+            font-size: 20px;
+          }
+          &.queue-anim-leaving {
+            position: relative !important;
+          }
+        }
+      }
+    }
+  }
+}

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,101 @@
+.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: 28px;
+    }
+  }
+}
+
+@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: 9px;
+            .first {
+              font-size: 13px;
+            }
+          }
+        }
+      }
+
+      span {
+        width: 90%;
+      }
+    }
+  }
+}

src/Home/less/nav3.less

@@ -1,9 +1,10 @@
 @header3: header3;
 
 .@{header3} {
-  background: #fff;
+  background: rgba(2, 2, 2, 0);
   width: 100%;
   z-index: 1;
+  background-image: url("https://oss.zjueva.net/testheader.jpg");
   box-shadow: 0 4px 6px fade(#000, 5);
   position: relative;
   top: 0;
@@ -49,7 +50,7 @@
     &-block {
       padding: 0 8px;
 
-      >* {
+      > * {
         display: inline-block;
       }
     }
@@ -58,7 +59,6 @@
   &-item,
   &-item-child,
   &-menu {
-
     .ant-menu-sub .ant-menu-item,
     .ant-menu-inline .ant-menu-item {
       height: auto;
@@ -111,7 +111,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 {
@@ -133,7 +133,7 @@
       height: 14px;
       cursor: pointer;
       position: absolute;
-      top: 24px;
+      top: 18px;
       right: 24px;
       z-index: 100;
 
@@ -143,7 +143,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 {
@@ -179,7 +179,7 @@
         }
       }
 
-      >.@{header3}-menu {
+      > .@{header3}-menu {
         opacity: 1;
         pointer-events: auto;
       }

src/Home/main.jsx

@@ -1,35 +1,36 @@
 /* eslint no-undef: 0 */
 /* eslint arrow-parens: 0 */
-import React from 'react';
-import { enquireScreen } from 'enquire-js';
-
-import Nav3 from './Nav3';
-import Banner3 from './Banner3';
-import Feature2 from './Feature2';
-import Feature1 from './Feature1';
-import Content3 from './Content3';
-import Feature8 from './Feature8';
-import Feature6 from './Feature6';
-import Content5 from './Content5';
-import Content9 from './Content9';
-import Footer0 from './Footer0';
-import Point from './Point';
+import React from "react";
+import { enquireScreen } from "enquire-js";
 
+import Nav3 from "./Nav3";
+import Banner3 from "./Banner3";
+import Feature2 from "./Feature2";
+import Feature1 from "./Feature1";
+import Content3 from "./Content3";
+import Feature8 from "./Feature8";
+import Feature3 from "./Feature3";
+import Feature6 from "./Feature6";
+import Content5 from "./Content5";
+import Content9 from "./Content9";
+import Footer1 from "./Footer1";
+import Point from "./Point";
+import Content4 from "./Content4";
 import {
   Nav30DataSource,
   Banner31DataSource,
   Feature20DataSource,
   Feature10DataSource,
   Feature30DataSource,
+  Feature31DataSource,
   Feature80DataSource,
   Feature60DataSource,
+  Content40DataSource,
   Content50DataSource,
   Content90DataSource,
-  Footer00DataSource,
-
-
-} from './data.source';
-import './less/antMotionStyle.less';
+  Footer10DataSource,
+} from "./data.source";
+import "./less/antMotionStyle.less";
 
 let isMobile;
 enquireScreen((b) => {
@@ -91,6 +92,12 @@ export default class Home extends React.Component {
         dataSource={Feature10DataSource}
         isMobile={this.state.isMobile}
       />,
+      <Content4
+        id="Content4_0"
+        key="Content4_0"
+        dataSource={Content40DataSource}
+        isMobile={this.state.isMobile}
+      />,
       <Content3
         id="Feature3_0"
         key="Feature3_0"
@@ -115,33 +122,32 @@ export default class Home extends React.Component {
         dataSource={Content50DataSource}
         isMobile={this.state.isMobile}
       />,
-      <Content9
-        id="Content9_0"
-        key="Content9_0"
-        dataSource={Content90DataSource}
+      <Feature3
+        id="Feature3_1"
+        key="Feature3_1"
+        dataSource={Feature31DataSource}
         isMobile={this.state.isMobile}
       />,
 
-      <Footer0
-        id="Footer0_0"
-        key="Footer0_0"
-        dataSource={Footer00DataSource}
+      <Footer1
+        id="Footer1_0"
+        key="Footer1_0"
+        dataSource={Footer10DataSource}
         isMobile={this.state.isMobile}
-      />, // 导航和页尾不进入锚点区，如果需要，自行添加;
+      />,
       <Point
         key="list"
         data={[
-          'Nav3_0',
-          'Banner3_1',
-          'Feature2_0',
-          'Feature1_0',
-          'Content3_0',
-          'Feature8_0',
-          'Feature6_0',
-          'Content5_0',
-          'Content9_0',
-
-          'Footer0_0',
+          "Nav3_0",
+          "Banner3_1",
+          "Feature2_0",
+          "Feature1_0",
+          "Content3_0",
+          "Feature8_0",
+          "Feature6_0",
+          "Content5_0",
+          "Content9_0",
+          "Footer0_0",
         ]}
       />,
     ];

src/LearnMore/Content11.jsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
-import QueueAnim from 'rc-queue-anim';
-import TweenOne from 'rc-tween-one';
-import { Button } from 'antd';
-import { getChildrenToRender } from './utils';
-
-class Content11 extends React.PureComponent {
-  render() {
-    const { ...props } = this.props;
-    const { dataSource } = props;
-    delete props.dataSource;
-    delete props.isMobile;
-    return (
-      <OverPack {...props} {...dataSource.OverPack}>
-        <QueueAnim
-          type="bottom"
-          leaveReverse
-          key="page"
-          delay={[0, 100]}
-          {...dataSource.titleWrapper}
-        >
-          {dataSource.titleWrapper.children.map(getChildrenToRender)}
-        </QueueAnim>
-        <TweenOne
-          key="button"
-          style={{ textAlign: 'center' }}
-          {...dataSource.button}
-          animation={{ y: 30, opacity: 0, type: 'from', delay: 300 }}
-        >
-          <Button {...dataSource.button.children.a}>
-            {dataSource.button.children.a.children}
-          </Button>
-        </TweenOne>
-      </OverPack>
-    );
-  }
-}
-
-export default Content11;

src/LearnMore/Feature7.jsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
-import QueueAnim from 'rc-queue-anim';
-import { Row, Col } from 'antd';
-
-import { getChildrenToRender } from './utils';
-
-function Feature7(props) {
-  const { dataSource, isMobile, ...tagProps } = props;
-  const { blockWrapper, titleWrapper } = dataSource;
-  const childrenToRender = blockWrapper.children.map((item, i) => (
-    <Col {...item} key={i.toString()}>
-      <a {...item.children}>
-        {item.children.children.map(getChildrenToRender)}
-      </a>
-    </Col>
-  ));
-  return (
-    <div {...tagProps} {...dataSource.wrapper}>
-      <div {...dataSource.page}>
-        <div {...dataSource.titleWrapper}>
-          {titleWrapper.children.map(getChildrenToRender)}
-        </div>
-        <OverPack {...dataSource.OverPack}>
-          <QueueAnim
-            key="queue"
-            type="bottom"
-            leaveReverse
-            interval={50}
-            component={Row}
-            {...blockWrapper}
-          >
-            {childrenToRender}
-          </QueueAnim>
-        </OverPack>
-      </div>
-    </div>
-  );
-}
-
-export default Feature7;

src/LearnMore/Pricing1.jsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
-import QueueAnim from 'rc-queue-anim';
-import { Row, Col, Button } from 'antd';
-import { getChildrenToRender } from './utils';
-
-class Pricing1 extends React.PureComponent {
-  getChildrenToRender = (item) => {
-    const {
-      wrapper,
-      topWrapper,
-      name,
-      buttonWrapper,
-      line,
-      content,
-      money,
-    } = item.children;
-    return (
-      <Col key={item.name} {...item}>
-        <QueueAnim type="bottom" {...wrapper}>
-          <div {...topWrapper}>
-            <div {...name} key="name">
-              {name.children}
-            </div>
-            <h1 {...money} key="money">
-              {money.children}
-            </h1>
-          </div>
-          <div {...content} key="content">
-            {content.children}
-          </div>
-          <i {...line} key="line" />
-          <div {...buttonWrapper} key="button">
-            <Button {...buttonWrapper.children.a} />
-          </div>
-        </QueueAnim>
-      </Col>
-    );
-  };
-
-  render() {
-    const { ...props } = this.props;
-    const { dataSource } = props;
-    delete props.dataSource;
-    delete props.isMobile;
-    const { block } = dataSource;
-    const childrenToRender = block.children.map(this.getChildrenToRender);
-    return (
-      <div {...props} {...dataSource.wrapper}>
-        <div {...dataSource.page}>
-          <div key="title" {...dataSource.titleWrapper}>
-            {dataSource.titleWrapper.children.map(getChildrenToRender)}
-          </div>
-          <OverPack {...dataSource.OverPack}>
-            <QueueAnim
-              type="bottom"
-              component={Row}
-              leaveReverse
-              ease={['easeOutQuad', 'easeInOutQuad']}
-              key="content"
-            >
-              {childrenToRender}
-            </QueueAnim>
-          </OverPack>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Pricing1;

src/LearnMore/data.source.js

@@ -1,668 +0,0 @@
-import React from 'react';
-export const Pricing10DataSource = {
-  wrapper: { className: 'home-page-wrapper pricing1-wrapper' },
-  page: { className: 'home-page pricing1' },
-  OverPack: { playScale: 0.3, className: 'pricing1-content-wrapper' },
-  titleWrapper: {
-    className: 'pricing1-title-wrapper',
-    children: [
-      {
-        name: 'title',
-        children: (
-          <>
-            <p>协会规划</p>
-          </>
-        ),
-        className: 'pricing1-title-h1',
-      },
-    ],
-  },
-  block: {
-    className: 'pricing1-block-wrapper',
-    children: [
-      {
-        name: 'block0',
-        className: 'pricing1-block',
-        md: 8,
-        xs: 24,
-        children: {
-          wrapper: { className: 'pricing1-block-box ' },
-          topWrapper: { className: 'pricing1-top-wrapper' },
-          name: {
-            className: 'pricing1-name',
-            children: (
-              <>
-                <p>
-                  <br />
-                </p>
-              </>
-            ),
-          },
-          money: {
-            className: 'pricing1-money k6niku34c3-editor_css',
-            children: (
-              <>
-                <p>公益组织</p>
-              </>
-            ),
-          },
-          content: {
-            className: 'pricing1-content k6nimnp5as-editor_css',
-            children:
-              'E志者协会作为一个公益组织，着眼实际，立足于电脑电器维修；开拓创新，积极学习应用前沿知识；扎根实践，广泛开展校内外志愿服务活动。',
-          },
-          line: { className: 'pricing1-line' },
-          buttonWrapper: {
-            className: 'pricing1-button-wrapper',
-            children: {
-              a: {
-                className: 'pricing1-button',
-                href: '/#/ticket',
-                children: (
-                  <>
-                    <p>从</p>
-                  </>
-                ),
-              },
-            },
-          },
-        },
-      },
-      {
-        name: 'block~k6nil20ln5q',
-        className: 'pricing1-block',
-        md: 8,
-        xs: 24,
-        children: {
-          wrapper: { className: 'pricing1-block-box ' },
-          topWrapper: { className: 'pricing1-top-wrapper' },
-          name: {
-            className: 'pricing1-name',
-            children: (
-              <>
-                <p>
-                  <br />
-                </p>
-              </>
-            ),
-          },
-          money: {
-            className: 'pricing1-money k6ninis0ok-editor_css',
-            children: (
-              <>
-                <p>校内校外</p>
-              </>
-            ),
-          },
-          content: {
-            className: 'pricing1-content k6niojh3hyf-editor_css',
-            children:
-              'E志者协会的公益之路渐行渐宽，从校内到校外，从服务师生到服务社会群众，从一个电器维修小组发展到如今如此规模的志愿者团队。',
-          },
-          line: { className: 'pricing1-line' },
-          buttonWrapper: {
-            className: 'pricing1-button-wrapper',
-            children: {
-              a: {
-                className: 'pricing1-button',
-                href: '/#/ticket',
-                children: (
-                  <>
-                    <p>浙里</p>
-                  </>
-                ),
-              },
-            },
-          },
-        },
-      },
-      {
-        name: 'block~k6nil2ir9',
-        className: 'pricing1-block',
-        md: 8,
-        xs: 24,
-        children: {
-          wrapper: { className: 'pricing1-block-box ' },
-          topWrapper: { className: 'pricing1-top-wrapper' },
-          name: {
-            className: 'pricing1-name',
-            children: (
-              <>
-                <p>
-                  <br />
-                </p>
-              </>
-            ),
-          },
-          money: {
-            className: 'pricing1-money k6nip1p7ezh-editor_css',
-            children: (
-              <>
-                <p>初心不忘</p>
-              </>
-            ),
-          },
-          content: {
-            className: 'pricing1-content k6nipheaxuh-editor_css',
-            children:
-              'E志者协会不忘初心，在志愿服务精神的传承中开拓进取汲取课堂及课外前沿科学技术之精华，以服务社会为己任，传播先进公益文化为己负责',
-          },
-          line: { className: 'pricing1-line' },
-          buttonWrapper: {
-            className: 'pricing1-button-wrapper',
-            children: {
-              a: {
-                className: 'pricing1-button',
-                href: '/#/ticket',
-                children: (
-                  <>
-                    <p>出发</p>
-                  </>
-                ),
-              },
-            },
-          },
-        },
-      },
-    ],
-  },
-};
-export const Feature70DataSource = {
-  wrapper: { className: 'home-page-wrapper feature7-wrapper' },
-  page: { className: 'home-page feature7' },
-  OverPack: { playScale: 0.3 },
-  titleWrapper: {
-    className: 'feature7-title-wrapper',
-    children: [
-      {
-        name: 'title',
-        className: 'feature7-title-h1',
-        children: (
-          <>
-            <p>
-              协会荣誉<br />
-            </p>
-          </>
-        ),
-      },
-      {
-        name: 'content',
-        className: 'feature7-title-content',
-        children: (
-          <>
-            <p>
-              &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
-              &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
-              &nbsp; ——仅摘取部分展示
-            </p>
-          </>
-        ),
-      },
-    ],
-  },
-  blockWrapper: {
-    className: 'feature7-block-wrapper',
-    gutter: 24,
-    children: [
-      {
-        md: 6,
-        xs: 24,
-        name: 'block1',
-        className: 'feature7-block',
-        children: {
-          className: 'feature7-block-group k6nj0rhbyb-editor_css',
-          children: [
-            {
-              name: 'title',
-              className: 'feature7-block-title k6niz26grar-editor_css',
-              children: (
-                <>
-                  <p>
-                    2009年<br />
-                  </p>
-                </>
-              ),
-            },
-            {
-              name: 'content',
-              className: 'feature7-block-content k6nj3s0akal-editor_css',
-              children: (
-                <>
-                  <p>
-                    &nbsp; &nbsp; &nbsp; &nbsp;协会获“<b>
-                      浙江省优秀志愿者服务队伍
-                    </b>”荣誉称号<br />
-                  </p>
-                </>
-              ),
-            },
-          ],
-        },
-      },
-      {
-        md: 6,
-        xs: 24,
-        name: 'block~k6nj6uobqcl',
-        className: 'feature7-block',
-        children: {
-          className: 'feature7-block-group k6nj0rhbyb-editor_css',
-          children: [
-            {
-              name: 'title',
-              className: 'feature7-block-title k6niz26grar-editor_css',
-              children: (
-                <>
-                  <p>
-                    2009年<br />
-                  </p>
-                </>
-              ),
-            },
-            {
-              name: 'content',
-              className: 'feature7-block-content k6nj3s0akal-editor_css',
-              children: (
-                <>
-                  <p>
-                    协会获“<b>浙江大学十大优秀志愿者服务集体</b>”荣誉称号<br />
-                  </p>
-                </>
-              ),
-            },
-          ],
-        },
-      },
-      {
-        md: 6,
-        xs: 24,
-        name: 'block~k6nj6vxuva',
-        className: 'feature7-block',
-        children: {
-          className: 'feature7-block-group k6nj0rhbyb-editor_css',
-          children: [
-            {
-              name: 'title',
-              className: 'feature7-block-title k6niz26grar-editor_css',
-              children: (
-                <>
-                  <p>
-                    2009年<br />
-                  </p>
-                </>
-              ),
-            },
-            {
-              name: 'content',
-              className: 'feature7-block-content k6nj3s0akal-editor_css',
-              children: (
-                <>
-                  <p>
-                    荣获“ <b>2009年度浙江大学优秀青年志愿者服务项目</b>”荣誉称号<br />
-                  </p>
-                </>
-              ),
-            },
-          ],
-        },
-      },
-      {
-        md: 6,
-        xs: 24,
-        name: 'block~k6nj6x1h1pp',
-        className: 'feature7-block',
-        children: {
-          className: 'feature7-block-group k6nj0rhbyb-editor_css',
-          children: [
-            {
-              name: 'title',
-              className: 'feature7-block-title k6niz26grar-editor_css',
-              children: (
-                <>
-                  <p>
-                    2010年<br />
-                  </p>
-                </>
-              ),
-            },
-            {
-              name: 'content',
-              className: 'feature7-block-content k6nj3s0akal-editor_css',
-              children: (
-                <>
-                  <p>
-                    协会由<b>一星级社团跃升为三星级社团</b>
-                    <br />
-                  </p>
-                </>
-              ),
-            },
-          ],
-        },
-      },
-      {
-        md: 6,
-        xs: 24,
-        name: 'block~k6nj6xikh3',
-        className: 'feature7-block',
-        children: {
-          className: 'feature7-block-group k6nj0rhbyb-editor_css',
-          children: [
-            {
-              name: 'title',
-              className: 'feature7-block-title k6niz26grar-editor_css',
-              children: (
-                <>
-                  <p>2012年</p>
-                </>
-              ),
-            },
-            {
-              name: 'content',
-              className: 'feature7-block-content k6nj3s0akal-editor_css',
-              children: (
-                <>
-                  <p>
-                    连续三年协会获评“<b>浙江大学学生十佳社团”</b>
-                    <br />
-                  </p>
-                </>
-              ),
-            },
-          ],
-        },
-      },
-      {
-        md: 6,
-        xs: 24,
-        name: 'block~k6nj6ycl25',
-        className: 'feature7-block',
-        children: {
-          className: 'feature7-block-group k6nj0rhbyb-editor_css',
-          children: [
-            {
-              name: 'title',
-              className: 'feature7-block-title k6niz26grar-editor_css',
-              children: (
-                <>
-                  <p>
-                    2014年<br />
-                  </p>
-                </>
-              ),
-            },
-            {
-              name: 'content',
-              className: 'feature7-block-content k6nj3s0akal-editor_css',
-              children: (
-                <>
-                  <p>
-                    协会荣升为浙江大学<b>四星级社团</b>
-                    <br />
-                  </p>
-                </>
-              ),
-            },
-          ],
-        },
-      },
-      {
-        md: 6,
-        xs: 24,
-        name: 'block~k6nj6z393nb',
-        className: 'feature7-block',
-        children: {
-          className: 'feature7-block-group k6nj0rhbyb-editor_css',
-          children: [
-            {
-              name: 'title',
-              className: 'feature7-block-title k6niz26grar-editor_css',
-              children: (
-                <>
-                  <p>2015年</p>
-                </>
-              ),
-            },
-            {
-              name: 'content',
-              className: 'feature7-block-content k6nj3s0akal-editor_css',
-              children: (
-                <>
-                  <p>
-                    协会入选<b>浙江大学最美公益服务集体</b>
-                    <br />
-                  </p>
-                </>
-              ),
-            },
-          ],
-        },
-      },
-      {
-        md: 6,
-        xs: 24,
-        name: 'block~k6nj70ilku',
-        className: 'feature7-block',
-        children: {
-          className: 'feature7-block-group k6nj0rhbyb-editor_css',
-          children: [
-            {
-              name: 'title',
-              className: 'feature7-block-title k6niz26grar-editor_css',
-              children: (
-                <>
-                  <p>
-                    2015年<br />
-                  </p>
-                </>
-              ),
-            },
-            {
-              name: 'content',
-              className: 'feature7-block-content k6nj3s0akal-editor_css',
-              children: (
-                <>
-                  <p>
-                    协会获<b>社团文化节精品活动二等奖</b>
-                    <br />
-                  </p>
-                </>
-              ),
-            },
-          ],
-        },
-      },
-      {
-        md: 6,
-        xs: 24,
-        name: 'block~k6nj716t4x',
-        className: 'feature7-block',
-        children: {
-          className: 'feature7-block-group k6nj0rhbyb-editor_css',
-          children: [
-            {
-              name: 'title',
-              className: 'feature7-block-title k6niz26grar-editor_css',
-              children: (
-                <>
-                  <p>
-                    2015年<br />
-                  </p>
-                </>
-              ),
-            },
-            {
-              name: 'content',
-              className: 'feature7-block-content k6nj3s0akal-editor_css',
-              children: (
-                <>
-                  <p>
-                    协会获<b>社团精品课程一等奖</b>
-                    <br />
-                  </p>
-                  <p>
-                    <b>
-                      <br />
-                    </b>
-                  </p>
-                </>
-              ),
-            },
-          ],
-        },
-      },
-      {
-        md: 6,
-        xs: 24,
-        name: 'block~k6nj71z66a',
-        className: 'feature7-block',
-        children: {
-          className: 'feature7-block-group k6nj0rhbyb-editor_css',
-          children: [
-            {
-              name: 'title',
-              className: 'feature7-block-title k6niz26grar-editor_css',
-              children: (
-                <>
-                  <p>
-                    2015年<br />
-                  </p>
-                </>
-              ),
-            },
-            {
-              name: 'content',
-              className: 'feature7-block-content k6nj3s0akal-editor_css',
-              children: (
-                <>
-                  <p>
-                    协会暑期社会实践入选为<b>校级重点社会实践项目</b>
-                    <br />
-                  </p>
-                </>
-              ),
-            },
-          ],
-        },
-      },
-      {
-        md: 6,
-        xs: 24,
-        name: 'block~k6nj72nvlx',
-        className: 'feature7-block',
-        children: {
-          className: 'feature7-block-group k6nj0rhbyb-editor_css',
-          children: [
-            {
-              name: 'title',
-              className: 'feature7-block-title k6niz26grar-editor_css',
-              children: (
-                <>
-                  <p>
-                    2016年<br />
-                  </p>
-                </>
-              ),
-            },
-            {
-              name: 'content',
-              className: 'feature7-block-content k6nj3s0akal-editor_css',
-              children: (
-                <>
-                  <p>
-                    <b>协会荣升为浙江大学五星级社团</b>
-                    <br />
-                  </p>
-                </>
-              ),
-            },
-          ],
-        },
-      },
-      {
-        md: 6,
-        xs: 24,
-        name: 'block~k6nj73ckswc',
-        className: 'feature7-block',
-        children: {
-          className: 'feature7-block-group k6nj0rhbyb-editor_css',
-          children: [
-            {
-              name: 'title',
-              className: 'feature7-block-title k6niz26grar-editor_css',
-              children: (
-                <>
-                  <p>2016年</p>
-                </>
-              ),
-            },
-            {
-              name: 'content',
-              className: 'feature7-block-content k6nj3s0akal-editor_css',
-              children: (
-                <>
-                  <p>
-                    协会荣获“ <b>2015年-2016年浙江大学学生示范性社团</b>”<br />
-                  </p>
-                </>
-              ),
-            },
-          ],
-        },
-      },
-    ],
-  },
-};
-export const Content110DataSource = {
-  OverPack: {
-    className: 'home-page-wrapper content11-wrapper',
-    playScale: 0.3,
-  },
-  titleWrapper: {
-    className: 'title-wrapper',
-    children: [
-      {
-        name: 'image',
-        children:
-          'https://gw.alipayobjects.com/zos/rmsportal/PiqyziYmvbgAudYfhuBr.svg',
-        className: 'title-image',
-      },
-      {
-        name: 'title',
-        children: (
-          <>
-            <p>
-              <br />
-            </p>
-          </>
-        ),
-        className: 'title-h1',
-      },
-      {
-        name: 'content',
-        children: (
-          <>
-            <p>
-              每年协会成员都有多人进入竺可桢学院工高班和爱迪生班等荣誉班级就读
-            </p>
-          </>
-        ),
-        className: 'title-content k6njo4yb7gb-editor_css',
-      },
-      {
-        name: 'content2',
-        children: (
-          <>
-            <p>
-              此外在”中控杯“、”大学生数学建模竞赛“、”电路板焊接大赛“中多人获得优异奖项
-            </p>
-          </>
-        ),
-        className: 'title-content k6njr5kxpn-editor_css',
-      },
-    ],
-  },
-  button: {
-    className: '',
-    children: { a: { className: 'button', href: '/#/ticket', children: '立即报名' } },
-  },
-};

src/LearnMore/less/antMotionStyle.less

@@ -1,7 +0,0 @@
-@import './common.less';
-@import './custom.less';
-@import './content.less';
-@import './pricing1.less';
-@import './feature7.less';
-@import './content11.less';
-@import './edit.less';

src/LearnMore/less/content11.less

@@ -1,46 +0,0 @@
-@content11: content11;
-.@{content11}-wrapper {
-  height: 480px;
-  background: url("https://gw.alipayobjects.com/zos/rmsportal/ZsWYzLOItgeaWDSsXdZd.svg") no-repeat bottom;
-  background-size: cover;
-  background-size: 100%;
-  margin: 0 auto;
-  overflow: hidden;
-  padding-top: 96px;
-  &.home-page-wrapper {
-    .title-wrapper {
-      margin-bottom: 32px;
-    }
-  }
-  .button {
-    box-shadow: 0 8px 16px #0554b7;
-    background: linear-gradient(to right, #05cbff, #1e5aff) !important;
-    height: 42px;
-    line-height: 42px;
-    font-size: 14px;
-    border: 0;
-    border-radius: 21px;
-    color: #fff;
-    width: 128px;
-    padding: 0 15px;
-    display: inline-block;
-    transition: transform .3s, box-shadow .3s;
-    &:hover {
-      transform: translateY(-4px);
-      box-shadow: 0 12px 20px #0554b7;
-    }
-    &:active {
-      transform: translateY(4px);
-      box-shadow: 0 4px 8px #0554b7;
-    }
-  }
-  .title-content {
-    line-height: 32px;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .@{content11}-wrapper {
-    padding-bottom: 0;
-  }
-}

src/LearnMore/less/edit.less

@@ -1,50 +0,0 @@
-#Pricing1_0
-  .pricing1-block-box
-  > .pricing1-top-wrapper
-  > .k6niku34c3-editor_css {
-  font-size: 28px;
-}
-#Pricing1_0 .ant-col > .pricing1-block-box > .k6nimnp5as-editor_css {
-  font-size: 16px;
-}
-#Pricing1_0
-  .pricing1-block-box
-  > .pricing1-top-wrapper
-  > .k6ninis0ok-editor_css {
-  font-size: 28px;
-}
-#Pricing1_0 .ant-col > .pricing1-block-box > .k6niojh3hyf-editor_css {
-  font-size: 16px;
-}
-#Pricing1_0
-  .pricing1-block-box
-  > .pricing1-top-wrapper
-  > .k6nip1p7ezh-editor_css {
-  font-size: 28px;
-}
-#Pricing1_0 .ant-col > .pricing1-block-box > .k6nipheaxuh-editor_css {
-  font-size: 16px;
-}
-#Feature7_0 .ant-col > .feature7-block-group > .k6niz1ixc6-editor_css {
-  width: 0%;
-}
-#Feature7_0 .ant-col > .feature7-block-group > .k6nj0lolnf-editor_css {
-  display: none;
-}
-#Feature7_0 .ant-row > .ant-col > .k6nj0rhbyb-editor_css {
-  text-align: center;
-}
-#Feature7_0 .ant-col > .feature7-block-group > .k6niz26grar-editor_css {
-  width: 50px;
-  margin: 0px 0px 16px 90px;
-}
-#Feature7_0 .ant-col > .feature7-block-group > .k6nj3s0akal-editor_css {
-  font-size: 16px;
-}
-#Content11_0 .title-wrapper > .k6njo4yb7gb-editor_css {
-  font-size: 16px;
-}
-#Content11_0 .title-wrapper > .k6njr5kxpn-editor_css {
-  font-size: 16px;
-  height: 100px;
-}

src/LearnMore/less/feature7.less

@@ -1,81 +0,0 @@
-@feature7: feature7;
-
-.@{feature7} {
-  &-wrapper {
-    min-height: 564px;
-    margin: 0 auto;
-    overflow: hidden;
-    background-color: #f7f9fc;
-
-    &.home-page-wrapper {
-      .home-page {
-        padding: 64px 24px;
-      }
-    }
-  }
-
-  &-title {
-
-    &-wrapper {
-      text-align: center;
-      margin-bottom: 40px;
-    }
-
-    &-h1 {
-      font-size: 32px;
-      color: @text-color;
-    }
-
-    &-content {
-      margin-top: 16px;
-    }
-  }
-
-  &-block {
-    margin-top: 28px;
-
-    &-group {
-      display: block;
-      padding: 28px 24px;
-      box-shadow: 0 2px 16px fade(#000, 8);
-      background-image: url('https://gw.alipayobjects.com/mdn/rms_ae7ad9/afts/img/A*fMOFSpRXMxsAAAAAAAAAAABkARQnAQ');
-      background-repeat: no-repeat;
-      background-position: 100% 100%;
-      transition: box-shadow @animate-duration @ease-in-out, transform @animate-duration @ease-in-out;
-
-      &:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 6px 16px fade(#000, 12);
-      }
-    }
-
-    &-image {
-      float: left;
-      width: 24px;
-    }
-
-    &-title {
-      font-size: 14px;
-      float: left;
-      margin-left: 8px;
-      margin-bottom: 16px;
-      color: @text-color;
-    }
-
-    &-content {
-      clear: both;
-      color: fade(@text-color, 75);
-    }
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .@{feature7}-wrapper {
-    min-height: 1540px;
-    &.home-page-wrapper {
-      .home-page {
-        padding: 56px 24px;
-      }
-    }
-  }
-}

src/LearnMore/less/pricing1.less

@@ -1,85 +0,0 @@
-@pricing1: pricing1;
-.@{pricing1}-wrapper {
-  min-height: 760px;
-  .@{pricing1} {
-    >p {
-      text-align: center;
-    }
-    &-content-wrapper {
-      min-height: 400px;
-    }
-    &-block-box {
-      width: 260px;
-      border-radius: 4px;
-      background: #eef0f3;
-      text-align: center;
-      color: #666;
-      min-height: 400px;
-      margin: auto;
-      border: 1px solid transparent;
-      .page-pro();
-      &.active {
-        border-color: @primary-color;
-        background: #fff;
-        .@{pricing1} {
-          &-top-wrapper {
-            background: @primary-color;
-          }
-          &-name,
-          &-money,
-          &-button {
-            color: #fff;
-          }
-          &-button {
-            background: @primary-color;
-          }
-        }
-      }
-    }
-    &-block {
-      margin-bottom: 24px;
-    }
-    &-top-wrapper {
-      width: 100%;
-      padding: 16px 24px;
-    }
-    &-name {
-      font-size: 14px;
-    }
-    &-money {
-      font-family: 'Helvetica Neue', sans-serif;
-      font-size: 32px;
-      color: #666;
-    }
-    &-content {
-      font-size: 12px;
-      line-height: 2;
-      font-weight: 300;
-      margin: 32px 24px 48px;
-    }
-    &-line {
-      display: block;
-      height: 1px;
-      background: #d9d9d9;
-      margin: 0 24px;
-    }
-    &-button-wrapper {
-      margin: 18px 24px;
-    }
-    &-button {
-      padding: 0 24px;
-    }
-  }
-  &.home-page-wrapper {
-    .@{pricing1}-title-wrapper {
-      margin-bottom: 64px;
-      text-align: center;
-    }
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .@{pricing1}-wrapper {
-    padding-bottom: 0;
-  }
-}

src/components/ChooseTime.js

@@ -0,0 +1,441 @@
+import React from "react";
+import axios from "axios";
+import {
+  Button,
+  Form,
+  Spin,
+  message,
+  Checkbox,
+  Alert,
+  BackTop,
+  Layout,
+  Card,
+  List,
+} from "antd";
+import "antd/dist/antd.css";
+import { confirmAlert } from "react-confirm-alert";
+import "react-confirm-alert/src/react-confirm-alert.css";
+import qs from "qs";
+import Background from "../background2.jpg";
+import { withRouter } from "react-router-dom";
+
+const Wishes = ["电脑部", "电器部", "文宣部", "人资部", "财外部"];
+class TimePicker extends React.Component {
+  constructor() {
+    super();
+    this.state = { confirmed: false };
+  }
+
+  componentDidMount() {
+    this.queryInfo();
+    this.queryTime();
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+    const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll;
+    confirmAlert({
+      title: "提交面试时间",
+      message: "请核实无误后谨慎提交。",
+      buttons: [
+        {
+          label: "Yes",
+          onClick: () => {
+            validateFieldsAndScroll((err, values) => {
+              if (err) {
+                message.error("填写不正确，请按照提示修改");
+              } else {
+                var Times = [];
+                for (var i in values) {
+                  for (var j = 0; j < values[i].length; j++)
+                    Times = Times.concat(values[i][j]);
+                }
+                let addForm = async () => {
+                  let result = await axios("api/posttime", {
+                    headers: {
+                      "Content-Type": "application/x-www-form-urlencoded",
+                    },
+                    method: "POST",
+                    data: qs.stringify({
+                      dto: JSON.stringify({ Times: Times }),
+                      guid: this.props.match.params.guid,
+                    }),
+                  });
+
+                  if (result.data.status === "success") {
+                    message.success("提交成功！期待你的精彩面试表现！");
+                  } else if (result.data.errorMsg === "TIME_ALREAY_CONFIRM") {
+                    message.error("我们已经为您分配了场次，请留意短信通知");
+                  } else {
+                    message.error("提交失败！可能是网络问题。");
+                  }
+                };
+                if (Times.length !== 0) {
+                  addForm();
+                } else {
+                  message.error("请至少选择一个场次！");
+                }
+              }
+            });
+          },
+        },
+        {
+          label: "No",
+          onClick: () => {},
+        },
+      ],
+    });
+  };
+  queryTime = async () => {
+    let result = await axios("api/gettime", {
+      method: "GET",
+    });
+    if (result.data.status === "success") {
+      var timetable = [];
+      for (var time of result.data.data) {
+        for (var index = 0; index < timetable.length; index++) {
+          if (timetable[index].day === time.day) {
+            for (var i = 0; i < timetable[index].time.length; i++) {
+              if (time.beginTime === timetable[index].time[i].label) {
+                timetable[index].time[i].value.push(time.id);
+                break;
+              }
+            }
+            if (i === timetable[index].time.length) {
+              timetable[index].time.push({
+                label: time.beginTime,
+                value: [time.id],
+              });
+            }
+            break;
+          }
+        }
+        if (index === timetable.length) {
+          timetable.push({
+            day: time.day,
+            time: [{ label: time.beginTime, value: [time.id] }],
+          });
+        }
+      }
+      this.setState({
+        option_list: timetable,
+        option_number: timetable.length,
+      });
+    } else {
+      message.error("获取面试场次失败，请稍后重试");
+      this.props.history.push("/");
+    }
+  };
+  queryInfo = async () => {
+    let result = await axios("api/getinfo/" + this.props.match.params.guid, {
+      method: "GET",
+    });
+
+    if (result.data.status === "success") {
+      result.data.data.firstWish = Wishes[result.data.data.firstWish - 1];
+      result.data.data.secondWish = Wishes[result.data.data.secondWish - 1];
+      result.data.data.thirdWish = Wishes[result.data.data.thirdWish - 1];
+      this.setState({
+        info: result.data.data,
+      });
+      if (this.state.info.times.length !== 0) {
+        message.warning(
+          "你已选择过面试时间！重复提交面试时间可能导致场次排错，请谨慎重复提交！",
+          0
+        );
+      }
+    } else {
+      message.error("获取个人信息失败，请稍后重试");
+      this.props.history.push("/");
+    }
+  };
+  render() {
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 12 },
+      },
+    };
+
+    const { getFieldDecorator } = this.props.form;
+    if (this.state.confirmed) {
+      return this.state.option_list ? (
+        <Form {...formItemLayout} onSubmit={this.handleSubmit}>
+          <h4 class="ant-typography" style={{ textAlign: "center" }}>
+            请尽量多选
+          </h4>
+          <Form.Item
+            label={
+              this.state.option_number > 0 ? this.state.option_list[0].day : 0
+            }
+          >
+            {getFieldDecorator("time1", {
+              initialValue: [],
+              rules: [{ required: false }],
+            })(
+              <Checkbox.Group
+                options={
+                  this.state.option_number > 0
+                    ? this.state.option_list[0].time
+                    : 0
+                }
+              />
+            )}
+          </Form.Item>
+
+          <Form.Item
+            label={
+              this.state.option_number > 1 ? this.state.option_list[1].day : 0
+            }
+          >
+            {getFieldDecorator("time2", {
+              initialValue: [],
+              rules: [{ required: false }],
+            })(
+              <Checkbox.Group
+                options={
+                  this.state.option_number > 1
+                    ? this.state.option_list[1].time
+                    : 0
+                }
+              />
+            )}
+          </Form.Item>
+
+          <Form.Item
+            label={
+              this.state.option_number > 2 ? this.state.option_list[2].day : 0
+            }
+          >
+            {getFieldDecorator("time3", {
+              initialValue: [],
+              rules: [{ required: false }],
+            })(
+              <Checkbox.Group
+                options={
+                  this.state.option_number > 2
+                    ? this.state.option_list[2].time
+                    : 0
+                }
+              />
+            )}
+          </Form.Item>
+
+          <Form.Item
+            label={
+              this.state.option_number > 3 ? this.state.option_list[3].day : 0
+            }
+          >
+            {getFieldDecorator("time4", {
+              initialValue: [],
+              rules: [{ required: false }],
+            })(
+              <Checkbox.Group
+                options={
+                  this.state.option_number > 3
+                    ? this.state.option_list[3].time
+                    : 0
+                }
+              />
+            )}
+          </Form.Item>
+
+          <Form.Item
+            label={
+              this.state.option_number > 4 ? this.state.option_list[4].day : 0
+            }
+          >
+            {getFieldDecorator("time5", {
+              initialValue: [],
+              rules: [{ required: false }],
+            })(
+              <Checkbox.Group
+                options={
+                  this.state.option_number > 4
+                    ? this.state.option_list[4].time
+                    : 0
+                }
+              />
+            )}
+          </Form.Item>
+
+          <Form.Item
+            label={
+              this.state.option_number > 5 ? this.state.option_list[5].day : 0
+            }
+          >
+            {getFieldDecorator("time6", {
+              initialValue: [],
+              rules: [{ required: false }],
+            })(
+              <Checkbox.Group
+                options={
+                  this.state.option_number > 5
+                    ? this.state.option_list[5].time
+                    : 0
+                }
+              />
+            )}
+          </Form.Item>
+
+          <Form.Item
+            label={
+              this.state.option_number > 6 ? this.state.option_list[6].day : 0
+            }
+          >
+            {getFieldDecorator("time7", {
+              initialValue: [],
+              rules: [{ required: false }],
+            })(
+              <Checkbox.Group
+                options={
+                  this.state.option_number > 6
+                    ? this.state.option_list[6].time
+                    : 0
+                }
+              />
+            )}
+          </Form.Item>
+          <br></br>
+          <Button
+            icon="copy"
+            style={{ display: "block", margin: "0 auto" }}
+            type="primary"
+            htmlType="submit"
+          >
+            提交
+          </Button>
+        </Form>
+      ) : (
+        <div>
+          <Spin size="large" tip="Loading...">
+            <Alert
+              message="正在打开页面"
+              description="请耐心等待，长时间未加载请请尝试刷新页面"
+              style={{ height: "700px", textAlign: "center" }}
+              type="info"
+            />
+          </Spin>
+        </div>
+      );
+    } else if (this.state.info) {
+      return this.state.info.times.length !== 0 ? (
+        <Alert
+          message="你已经选择过面试时间！"
+          description={
+            <div>
+              <p>
+                重复提交面试时间可能导致场次排错，请谨慎重复提交，点击右上角关闭警告以继续
+              </p>
+              <List
+                size="small"
+                header={<div>已选择的时间</div>}
+                bordered
+                dataSource={this.state.info.times}
+                renderItem={(item) => <List.Item>{item}</List.Item>}
+              />
+            </div>
+          }
+          type="warning"
+          showIcon
+          closable
+          style={{ height: "700px", textAlign: "center" }}
+          afterClose={() => {
+            const info = Object.assign({}, this.state.info, { times: [] });
+            this.setState({ info: info });
+          }}
+        />
+      ) : (
+        <div>
+          <Card title="个人信息">
+            <Card type="inner" title="姓名">
+              <h3>{this.state.info.name}</h3>
+            </Card>
+            <Card type="inner" title="学号">
+              <h3>{this.state.info.id_student}</h3>
+            </Card>
+            <Card type="inner" title="第一志愿">
+              <h3>{this.state.info.firstWish}</h3>
+            </Card>
+            <Card type="inner" title="第二志愿">
+              <h3>{this.state.info.secondWish}</h3>
+            </Card>
+            <Card type="inner" title="第三志愿">
+              <h3>{this.state.info.thirdWish}</h3>
+            </Card>
+          </Card>
+          <br></br>
+          <Button
+            style={{ display: "block", margin: "0 auto" }}
+            type="primary"
+            onClick={(e) => {
+              this.setState({ confirmed: true });
+              if (!this.state.option_list) {
+                this.queryTime();
+              }
+            }}
+          >
+            确认个人信息
+          </Button>
+        </div>
+      );
+    } else {
+      return (
+        <div>
+          <Spin size="large" tip="Loading...">
+            <Alert
+              message="正在打开页面"
+              description="请耐心等待，长时间未加载请请尝试刷新页面"
+              type="info"
+              style={{ height: "700px", textAlign: "center" }}
+            />
+          </Spin>
+        </div>
+      );
+    }
+  }
+}
+const Chooser = withRouter(Form.create({})(TimePicker));
+
+class ChooseTime extends React.Component {
+  render() {
+    return (
+      <Layout style={{ backgroundImage: `url(${Background})` }}>
+        <div
+          style={{
+            background: "#fff",
+            borderRadius: 20,
+            paddingTop: 48,
+            paddingLeft: 24,
+            paddingRight: 24,
+            marginTop: 24,
+            marginLeft: 24,
+            marginRight: 24,
+            marginBottom: 24,
+            opacity: 0.92,
+          }}
+        >
+          <h2 class="ant-typography" style={{ textAlign: "center" }}>
+            浙江大学学生E志者协会2020年面试时间
+          </h2>
+          <h4 class="ant-typography" style={{ textAlign: "center" }}>
+            如果下列时间全部没空，请联系林同学：QQ 1198940948
+          </h4>
+          <h4 class="ant-typography" style={{ textAlign: "center" }}>
+            面试时间约为30min
+          </h4>
+          <Chooser />
+          <BackTop visibilityHeight={200} />
+          <p style={{ textAlign: "center" }}>
+            浙江大学学生E志者协会©2020 Created by EVATech
+          </p>
+        </div>
+      </Layout>
+    );
+  }
+}
+export default ChooseTime;

src/components/Message.js

@@ -0,0 +1,42 @@
+const activated = true;
+const department = ["", "电脑部", "电器部", "文宣部", "人资部", "财外部"];
+
+export default function successInform(phone, name, stuID, first, second) {
+  if (!activated) return;
+  // console.log(phone, name, stuID, first, second);
+  let nownum = localStorage.getItem("EVA_SMS_SERVICE");
+  if (nownum === null) localStorage.setItem("EVA_SMS_SERVICE", "1");
+  else if (nownum === "1") localStorage.setItem("EVA_SMS_SERVICE", "2");
+  else if (nownum === "2") localStorage.setItem("EVA_SMS_SERVICE", "3");
+  if (nownum === "3") return;
+  // const Core = require("@alicloud/pop-core");
+  // let client = new Core({
+  //   accessKeyId: "*",
+  //   accessKeySecret: "*",
+  //   endpoint: "https://dysmsapi.aliyuncs.com",
+  //   apiVersion: "2017-05-25",
+  // });
+
+  // let temp = {
+  //   name: name,
+  //   stuID: stuID,
+  //   first: department[first],
+  //   second: department[second],
+  // };
+  // temp = JSON.stringify(temp);
+
+  // let params = {
+  //   RegionId: "cn-hangzhou",
+  //   PhoneNumbers: phone,
+  //   SignName: "EVA记录",
+  //   TemplateCode: "SMS_199600228",
+  //   TemplateParam: temp,
+  // };
+  // // console.log(params);
+  // let requestOption = {
+  //   method: "POST",
+  //   headers: {},
+  // };
+
+  // client.request("SendSms", params, requestOption);
+}

src/components/Sheet.js

@@ -1,380 +1,565 @@
-import React from 'react'
-import axios from 'axios'
-import { Button, Form, Input,Icon, Radio, message } from 'antd'
-import 'antd/dist/antd.css'
-import { confirmAlert } from 'react-confirm-alert'
-import 'react-confirm-alert/src/react-confirm-alert.css'; 
-import qs from 'qs';
-
+import React from "react";
+import axios from "axios";
+import {
+  Button,
+  Form,
+  Input,
+  Icon,
+  Radio,
+  message,
+  Divider,
+  Modal,
+} from "antd";
+import "antd/dist/antd.css";
+import { confirmAlert } from "react-confirm-alert";
+import "react-confirm-alert/src/react-confirm-alert.css";
+import qs from "qs";
+import successInform from "./Message";
+import qrqq from "../picture/qr-qq.png";
 class NewForm extends React.Component {
-    componentDidMount() {
-      this.loadLocalStorage();
-    }
-    loadLocalStorage = () => {
-      const values = JSON.parse(localStorage.getItem('formCache') || '{}');
-      this.props.form.setFieldsValue(values);
-    }
-    saveLocalStorage = () => {
-      const values = this.props.form.getFieldsValue();
-      localStorage.setItem('formCache', JSON.stringify(values));
-    }
-    onStuIdChange = () =>{
-      let ID = this.props.form.getFieldsValue(['StuId'])['StuId']
-      this.props.setID(ID)
-    }
-    handleSubmit = e => {
-        e.preventDefault();
-        const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll
-        confirmAlert({
-          title: '提交报名表',
-          message:  '您填写的表格已经保存在浏览器中，以后可以修改后覆盖提交。点击 Yes 进行提交。',
-          buttons: [
-            {
-              label: 'Yes',
-              onClick: () => {
-                validateFieldsAndScroll(
-                  (err, values) => {
-                      if (err) {
-                          message.error('填写不正确，请按照提示修改');
-                      }
-                      else {
-                          console.log(values);
-                          let addForm = async () => {
-                              let result = await axios(
-                                  'api/submit',
-                                  {
-                                      headers:{'Content-Type': 'application/x-www-form-urlencoded'},
-                                      method: "POST",
-                                      data: qs.stringify({"dto":JSON.stringify(values)})
-                                  }
-                              )
-                              if (result.data.success) {
-                                  message.success("提交成功！后续的面试时间会以短信形式通知，期待你的加入！")
-                              }
-                              else {
-                                  message.error("提交失败！可能是网络问题。")
-                              }
-                          }
-                          addForm();
-                      }
-                  }
-              )
-              }
+  constructor() {
+    super();
+    this.state = {
+      WishValid: false,
+      firstWish: undefined,
+      secondWish: undefined,
+      visible: false,
+      isFinishSubmit: false,
+      confirmLoading: false,
+    };
+  }
+
+  componentDidMount() {
+    this.loadLocalStorage();
+    this.props.form.validateFields(["firstWish"], { force: true });
+  }
+  loadLocalStorage = () => {
+    const values = JSON.parse(localStorage.getItem("formCache") || "{}");
+    this.props.setID(values.id_student);
+    this.props.form.setFieldsValue(values);
+  };
+  saveLocalStorage = () => {
+    const values = this.props.form.getFieldsValue();
+    localStorage.setItem("formCache", JSON.stringify(values));
+  };
+  onStuIdChange = () => {
+    let ID = this.props.form.getFieldsValue(["id_student"])["id_student"];
+    this.props.setID(ID);
+  };
+  handleSubmit = (e) => {
+    e.preventDefault();
+    this.setState({ visible: true, isFinishSubmit: false });
+  };
+  handleSuccessSubmit = () => {
+    this.setState({ isFinishSubmit: true, confirmLoading: false });
+  };
+  handleFailSubmit = () => {
+    this.setState({
+      isFinishSubmit: false,
+      confirmLoading: false,
+      visible: false,
+    });
+  };
+  handleStartSubmit = () => {
+    this.setState({ confirmLoading: true });
+  };
+  handleCancel = (e) => {
+    this.setState({
+      visible: false,
+      isFinishSubmit: false,
+      confirmLoading: false,
+    });
+  };
+  handleOk = (e) => {
+    this.setState({
+      visible: true,
+    });
+    const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll;
+    validateFieldsAndScroll((err, values) => {
+      if (err) {
+        message.error("填写不正确，请按照提示修改");
+      } else {
+        // console.log(values);
+        let addForm = async () => {
+          this.handleStartSubmit();
+          let result = await axios("api/submit", {
+            headers: {
+              "Content-Type": "application/x-www-form-urlencoded",
             },
-            {
-              label: 'No',
-              onClick: () => {}
+            method: "POST",
+            data: qs.stringify({ dto: JSON.stringify(values) }),
+          });
+
+          this.saveLocalStorage();
+          if (result.data.status === "success") {
+            message.success(
+              "提交成功！后续的面试时间会以短信形式通知，期待你的加入！",
+              5
+            );
+            //maybe this is useless but I really don't want to delete it
+            successInform(
+              values.phone,
+              values.name,
+              values.id_student,
+              values.firstWish,
+              values.secondWish
+            );
+            this.handleSuccessSubmit();
+          } else {
+            if (result.data.errorMsg === "TICKET_NOT_LEGEAL") {
+              message.error("提交失败！请检查报名表填写是否正确。");
+            } else if (result.data.errorMsg === "TICKET_INFO_INCOMPLETE") {
+              message.error("提交失败！请检查报名表填写是否完整。");
+            } else if (result.data.errorMsg === "TICKET_ALREADY_OK") {
+              message.error(
+                "我们已为您分配了面试场次，请注意短信通知，请勿重复提交!"
+              );
+            } else {
+              message.error("提交失败！可能是网络问题。");
             }
-          ]
-        });
-    }
-
-    render() {
-        const formItemLayout = {
-            labelCol: {
-                xs: { span: 24 },
-                sm: { span: 8 },
-            },
-            wrapperCol: {
-                xs: { span: 24 },
-                sm: { span: 12 },
-            },
+            this.handleFailSubmit();
+          }
         };
-
-        const tailFormItemLayout = {
-            wrapperCol: {
-                xs: {
-                    span: 24,
-                    offset: 0,
-                },
-                sm: {
-                    span: 16,
-                    offset: 8,
-                },
-            },
-        };
-
-        const { getFieldDecorator } = this.props.form;
-
-        return (
-            <Form {...formItemLayout} onSubmit={this.handleSubmit}>
-                <Form.Item label="姓名">
-                    {
-                        getFieldDecorator('name', {
-                            rules: [
-                                {
-                                    required: true,
-                                    message: "请在此处填入你的姓名"
-                                }
-                            ]
-                        })(
-                            <Input />
-                        )
-                    }
-                </Form.Item>
-                
-                <Form.Item label="学号"   onChange = {this.onStuIdChange} >
-                    {getFieldDecorator('StuId', {
-                    rules: [
-                        {
-                        required: true,
-                        message: '请在此处填入你的学号',
-                        },
-                        { pattern: /^[0-9]+$/, message: "混进去了数字以外的东西呀" }
-
-                    ],
-                    })(<Input />)}
-                </Form.Item>
-                
-                <Form.Item label="性别">
-                {
-                  getFieldDecorator('sex', {
-                    rules: [
-                      {
-                        required: true,
-                        message: '请选择你的性别'
-                      }
-                    ]
-                  }
-                  )
-                    (
-                      <Radio.Group>
-                        <Radio.Button value={0} ><div><Icon type="man" />男</div></Radio.Button>
-                        <Radio.Button value={1} ><div><Icon type="woman" />女</div></Radio.Button>
-                      </Radio.Group>
-                    )
-                }
-                </Form.Item>
-                
-                <Form.Item label="年级">
-                {
-                  getFieldDecorator('grade', {
-                    rules: [
-                      {
-                        required: true,
-                        message: '请选择你的年级'
-
-                      }
-                    ]
-                  }
-                  )
-                    (
-                      <Radio.Group >
-                        <Radio.Button value={1}>大一</Radio.Button>
-                        <Radio.Button value={2}>大二</Radio.Button>
-                        <Radio.Button value={3}>大三</Radio.Button>
-                        <Radio.Button value={4}>大四</Radio.Button>
-                      </Radio.Group>
-                    )
-                }
-              </Form.Item>
-              
-              <Form.Item label="专业/大类">
-                {
-                  getFieldDecorator('major', {
-                    rules: [
-                      {
-                        required: true,
-                        message: '请在这里填入你的专业'
-
-                      }
-                    ]
-                  }
-                  )(
-                    <Input placeholder="例如：工科试验班(电气)" />
-                  )
-                }
-              </Form.Item>
-              
-              <Form.Item label="E-mail">
-                {getFieldDecorator('email', {
-                  rules: [
-                    {
-                      required: true,
-                      message: '请在此处填入你的E-mail'
-                    }, { type: 'email', message: "邮箱格式不正确" }
-                  ],
-                })(<Input />)}
-              </Form.Item>
-              
-              <Form.Item label="联系电话">
-                {getFieldDecorator('phone', {
-                  rules: [
-                    {
-                      required: true,
-                      message: '请在此处填入你的电话号码',
-                    },
-                    { pattern: /^1[3456789]\d{9}$/, message: "手机号不太对呀" }
-                  ],
-                })(<Input />)}
-              </Form.Item>
-              
-              <Form.Item label="第一志愿（两志愿请不要重复选择）">
-                    {        
-                        getFieldDecorator('firstWish', {rules: [
-                            {
-                              required: true,
-                              message: '请选择第一志愿'
-                            }
-                          ]})(       
-                            <Radio.Group name="firstWish" size="medium">
-                                <Radio.Button value={1}>电脑部</Radio.Button>
-                                <Radio.Button value={2}>电器部</Radio.Button>
-                                <Radio.Button value={3}>文宣部</Radio.Button>
-                                <Radio.Button value={4}>人资部</Radio.Button>
-                                <Radio.Button value={5}>财外部</Radio.Button>
-                            </Radio.Group>
-                        )
-                    }
-                </Form.Item>
-                
-                <Form.Item label="第二志愿（两志愿请不要重复选择）">
-                    {
-                        getFieldDecorator('secondWish', {rules: [
-                            {
-                              required: true,
-                              message: '请选择第二志愿'
-                            }
-                          ]})(
-                            <Radio.Group name="secondWish" size="medium">
-                                <Radio.Button value={1}>电脑部</Radio.Button>
-                                <Radio.Button value={2}>电器部</Radio.Button>
-                                <Radio.Button value={3}>文宣部</Radio.Button>
-                                <Radio.Button value={4}>人资部</Radio.Button>
-                                <Radio.Button value={5}>财外部</Radio.Button>
-                            </Radio.Group>
-                        )
-                    }
-                </Form.Item>
-                
-                <Form.Item label="是否服从调剂">
-                {
-                  getFieldDecorator('adjustment', {
-                    rules: [
-                      {
-                        required: true,
-                        message: '请选择是否服从调剂'
-                      }
-                    ]
-                  }
-                  )(
-                    <Radio.Group >
-                      <Radio value={true}>是</Radio>
-                      <Radio value={false}>否</Radio>
-                    </Radio.Group>
-                  )
-                }
-                </Form.Item>
-
-                <Form.Item label="简述你选择第一志愿的原因">
-                {
-                getFieldDecorator('firstReason', {
-                    rules: [
-                    {
-                        required: true,
-                        message: '请填入你选择志愿的原因'
-                    }
-                    ]
-                }
-                )(
-                    <Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
-                )
-                }
-                </Form.Item>
-                
-                <Form.Item label="简述你选择第二志愿的原因">
-                    {
-                    getFieldDecorator('secondReason', {
-                        rules: [
-                        {
-                            required: true,
-                            message: '请填入你选择志愿的原因'
-                        }
-                        ]
-                    }
-                    )
-                        (
-                        <Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
-                        )
-                    }
-                </Form.Item>
-                
-                <Form.Item label="简单介绍一下你的特长">
-                    {
-                    getFieldDecorator('question1', {
-                        rules: [
-                        {
-                            required: true,
-                            message: '请简单介绍一下你的特长'
-                        }
-                        ]
-                    }
-                    )
-                        (
-                        <Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
-                        )
-                    }
-                </Form.Item>
-            
-                <Form.Item label="你希望未来能在E志者协会得到什么？又能为E志付出什么？">
-                    {
-                    getFieldDecorator('question2', {
-                        rules: [
-                        {
-                            required: true,
-                            message: '请填入问题的回答'
-                        }
-                        ]
-                    }
-                    )
-                        (
-                        <Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
-                        )
-                    }
-                </Form.Item>
-                <Form.Item style={{display:"none"}}>
-                  {
-                    getFieldDecorator('time1', {initialValue:0,rules: [{required:true}]})
-                  }
-                </Form.Item>
-                <Form.Item style={{display:"none"}}>
-                  {
-                    getFieldDecorator('time2', {initialValue:0,rules: [{required:true}]})
-                  }
-                </Form.Item>
-                <Form.Item style={{display:"none"}}>
-                  {
-                    getFieldDecorator('time3', {initialValue:0,rules: [{required:true}]})
-                  }
-                </Form.Item>
-                <Form.Item style={{display:"none"}}>
-                  {
-                    getFieldDecorator('time4', {initialValue:0,rules: [{required:true}]})
-                  }
-                </Form.Item>
-                <Form.Item style={{display:"none"}}>
-                  {
-                    getFieldDecorator('time5', {initialValue:0,rules: [{required:true}]})
-                  }
-                </Form.Item>
-                <Form.Item style={{display:"none"}}>
-                  {
-                    getFieldDecorator('time6', {initialValue:0,rules: [{required:true}]})
-                  }
-                </Form.Item>
-                <Form.Item style={{display:"none"}}>
-                  {
-                    getFieldDecorator('time7', {initialValue:0,rules: [{required:true}]})
-                  }
-                </Form.Item>
-                <Form.Item {...tailFormItemLayout}>
-                    <Button icon="copy" style={{ textAlign: 'center' }} type="primary" htmlType="submit">提交</Button>
-                    <Button icon="save" style={{ margin: "20px", textAlign: 'center' }} onClick={() => { this.saveLocalStorage(); message.success('草稿已保存') }}>保存草稿</Button>
-                </Form.Item>
-            </Form>
-        )
+        addForm();
+      }
+    });
+  };
+  validator = (rule, value, callback) => {
+    this.setState({ WishValid: true });
+    const form = this.props.form;
+    var firstWish = value;
+    var secondWish = form.getFieldValue("secondWish");
+    var thirdWish = form.getFieldValue("thirdWish");
+    this.setState({ firstWish: firstWish, secondWish: secondWish });
+    try {
+      if (
+        firstWish === undefined ||
+        secondWish === undefined ||
+        thirdWish === undefined
+      ) {
+        throw "请完整填写三个志愿";
+      }
+      if (
+        firstWish === secondWish ||
+        firstWish === thirdWish ||
+        secondWish === thirdWish
+      ) {
+        throw "三个志愿不能重复";
+      }
+    } catch (err) {
+      this.setState({ WishValid: false });
+      callback(err);
     }
+    callback();
+  };
+  render() {
+    const questions = [
+      [],
+      [
+        "【电脑部】说说你跟电脑有关的印象深刻的事情（或者你对电脑最感兴趣的地方，可以是某个组成部分）",
+        "【电脑部】来电脑部之后想学些什么?有什么想学的也可以说呀",
+      ],
+      [
+        "【电器部】你现在有哪些电子或技术方面的知识或经历吗？若有，请简述；若无，请讲讲你当下最想学会的一项技能，并打算如何运用它",
+        "【电器部】你认为动手能力和理论知识对于电器维修来说哪个更重要？为什么？",
+      ],
+      [
+        "【文宣部】在文宣方面，你有什么优势或者打算如何提高自己？",
+        "【文宣部】描述一下你构想的以xx为主题的海报or摄影作品，xx可以是你想到的任何事物",
+      ],
+      [
+        "【人资部】请举一个你想出的创新点子（实现过或现实中有一定的可操作性），最好是关于组织某次活动（宣传活动，内建活动，特殊的生日祝福等等）",
+        "【人资部】你觉得你身上最符合人资部的特点是什么？",
+      ],
+      [
+        "【财外部】在社团全员大会/部门内建/部门事务这三种情况打破了你原来的学习安排的情况下，你如何去平衡社团与学习生活？",
+        "【财外部】说说令你印象最深刻的理财经历，可以是任何和理财有关的哦",
+      ],
+    ];
+    const ToolTips = this.state.isFinishSubmit ? (
+      <>
+        <p>提交报名表后，我们强烈建议您加入QQ纳新咨询群，群号:1126888868</p>
+        <img src={qrqq} alt="二维码" width={250} />
+      </>
+    ) : (
+      <>
+        <p>
+          您填写的表格已经保存在浏览器中，之后可以修改后覆盖原提交。请点击按钮进行提交。
+        </p>
+      </>
+    );
+    const tailFormItemLayout = {
+      wrapperCol: {
+        xs: {
+          span: 24,
+          offset: 0,
+        },
+        sm: {
+          span: 16,
+          offset: 8,
+        },
+      },
+    };
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 12 },
+      },
+    };
+    const questionItemLayout = {
+      labelAlign: "left",
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 20, offset: 4 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 11, offset: 4 },
+      },
+    };
+    const { getFieldDecorator } = this.props.form;
 
+    return (
+      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
+        <Divider
+          dashed={true}
+          orientatio="center"
+          style={{
+            fontSize: 19,
+            fontWeight: "bold",
+          }}
+        >
+          基本信息
+        </Divider>
+        <Form.Item label="姓名">
+          {getFieldDecorator("name", {
+            rules: [
+              {
+                required: true,
+                message: "请在此处填入你的姓名",
+              },
+            ],
+          })(<Input />)}
+        </Form.Item>
+
+        <Form.Item
+          label="学号(请先填写此项再上传照片)"
+          onChange={this.onStuIdChange}
+        >
+          {getFieldDecorator("id_student", {
+            rules: [
+              {
+                required: true,
+                message: "请在此处填入你的学号",
+              },
+              { pattern: /^[0-9]+$/, message: "混进去了数字以外的东西呀" },
+            ],
+          })(<Input />)}
+        </Form.Item>
+
+        <Form.Item label="性别">
+          {getFieldDecorator("sex", {
+            rules: [
+              {
+                required: true,
+                message: "请选择你的性别",
+              },
+            ],
+          })(
+            <Radio.Group>
+              <Radio.Button value={0}>
+                <div>
+                  <Icon type="man" />男
+                </div>
+              </Radio.Button>
+              <Radio.Button value={1}>
+                <div>
+                  <Icon type="woman" />女
+                </div>
+              </Radio.Button>
+            </Radio.Group>
+          )}
+        </Form.Item>
+
+        <Form.Item label="年级">
+          {getFieldDecorator("grade", {
+            rules: [
+              {
+                required: true,
+                message: "请选择你的年级",
+              },
+            ],
+          })(
+            <Radio.Group>
+              <Radio.Button value={1}>大一</Radio.Button>
+              <Radio.Button value={2}>大二</Radio.Button>
+              <Radio.Button value={3}>大三</Radio.Button>
+              <Radio.Button value={4}>大四</Radio.Button>
+            </Radio.Group>
+          )}
+        </Form.Item>
+
+        <Form.Item label="专业/大类">
+          {getFieldDecorator("major", {
+            rules: [
+              {
+                required: true,
+                message: "请在这里填入你的专业",
+              },
+            ],
+          })(<Input placeholder="例如：工科试验班(电气)" />)}
+        </Form.Item>
+
+        <Form.Item label="E-mail">
+          {getFieldDecorator("email", {
+            rules: [
+              {
+                required: true,
+                message: "请在此处填入你的E-mail",
+              },
+              { type: "email", message: "邮箱格式不正确" },
+            ],
+          })(<Input />)}
+        </Form.Item>
+
+        <Form.Item label="联系电话">
+          {getFieldDecorator("phone", {
+            rules: [
+              {
+                required: true,
+                message: "请在此处填入你的电话号码",
+              },
+              { pattern: /^1[3456789]\d{9}$/, message: "手机号不太对呀" },
+            ],
+          })(<Input />)}
+        </Form.Item>
+
+        <Form.Item label="自我介绍(可以说说你的兴趣,特长等)">
+          {getFieldDecorator("question1", {
+            rules: [
+              {
+                required: true,
+                message: "做一个简单的自我介绍呗",
+              },
+            ],
+          })(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
+        </Form.Item>
+        <Divider
+          orientation="center"
+          style={{
+            fontSize: 19,
+            fontWeight: "bold",
+          }}
+        >
+          Pick你的最爱
+        </Divider>
+        <Form.Item label="第一志愿（三个志愿请不要重复选择）">
+          {getFieldDecorator("firstWish", {
+            rules: [
+              {
+                required: true,
+                message: "请选择第一志愿",
+              },
+              {
+                validator: this.validator,
+              },
+            ],
+          })(
+            <Radio.Group name="firstWish" size="medium">
+              <Radio.Button value={1}>电脑部</Radio.Button>
+              <Radio.Button value={2}>电器部</Radio.Button>
+              <Radio.Button value={3}>文宣部</Radio.Button>
+              <Radio.Button value={4}>人资部</Radio.Button>
+              <Radio.Button value={5}>财外部</Radio.Button>
+            </Radio.Group>
+          )}
+        </Form.Item>
+
+        <Form.Item label="第二志愿（三个志愿请不要重复选择）">
+          {getFieldDecorator("secondWish", {
+            rules: [
+              {
+                required: true,
+                message: "请选择第二志愿",
+              },
+              {
+                validator: (rule, value, callback) => {
+                  this.props.form.validateFields(["firstWish"], {
+                    force: true,
+                  });
+                  callback();
+                },
+              },
+            ],
+          })(
+            <Radio.Group name="secondWish" size="medium">
+              <Radio.Button value={1}>电脑部</Radio.Button>
+              <Radio.Button value={2}>电器部</Radio.Button>
+              <Radio.Button value={3}>文宣部</Radio.Button>
+              <Radio.Button value={4}>人资部</Radio.Button>
+              <Radio.Button value={5}>财外部</Radio.Button>
+            </Radio.Group>
+          )}
+        </Form.Item>
+
+        <Form.Item label="第三志愿（三个志愿请不要重复选择）">
+          {getFieldDecorator("thirdWish", {
+            rules: [
+              {
+                required: true,
+                message: "请选择第三志愿",
+              },
+              {
+                validator: (rule, value, callback) => {
+                  this.props.form.validateFields(["firstWish"], {
+                    force: true,
+                  });
+                  callback();
+                },
+              },
+            ],
+          })(
+            <Radio.Group name="thirdWish" size="medium">
+              <Radio.Button value={1}>电脑部</Radio.Button>
+              <Radio.Button value={2}>电器部</Radio.Button>
+              <Radio.Button value={3}>文宣部</Radio.Button>
+              <Radio.Button value={4}>人资部</Radio.Button>
+              <Radio.Button value={5}>财外部</Radio.Button>
+            </Radio.Group>
+          )}
+        </Form.Item>
+
+        <Form.Item
+          label="是否服从调剂"
+          onChange={() => {
+            if (this.props.form.getFieldValue("adjustment") === true)
+              message.warning(
+                "往届两技术部报名人数较多，选择调剂表示存在您被分配到第二、三志愿的可能，请审慎选择。",
+                6
+              );
+          }}
+        >
+          {getFieldDecorator("adjustment", {
+            rules: [
+              {
+                required: true,
+                message: "请选择是否服从调剂",
+              },
+            ],
+          })(
+            <Radio.Group>
+              <Radio value={true}>是</Radio>
+              <Radio value={false}>否</Radio>
+            </Radio.Group>
+          )}
+        </Form.Item>
+
+        <Form.Item
+          {...questionItemLayout}
+          label={this.state.firstWish ? questions[this.state.firstWish][0] : ""}
+          style={this.state.WishValid ? {} : { display: "none" }}
+        >
+          {getFieldDecorator("firstReason", {
+            rules: [
+              {
+                required: true,
+                message: "请回答问题",
+              },
+            ],
+          })(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
+        </Form.Item>
+
+        <Form.Item
+          {...questionItemLayout}
+          label={this.state.firstWish ? questions[this.state.firstWish][1] : ""}
+          style={this.state.WishValid ? {} : { display: "none" }}
+        >
+          {getFieldDecorator("secondReason", {
+            rules: [
+              {
+                required: true,
+                message: "请回答问题",
+              },
+            ],
+          })(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
+        </Form.Item>
+
+        <Form.Item
+          {...questionItemLayout}
+          label={
+            this.state.secondWish ? questions[this.state.secondWish][0] : ""
+          }
+          style={this.state.WishValid ? {} : { display: "none" }}
+        >
+          {getFieldDecorator("thirdReason", {
+            rules: [
+              {
+                required: true,
+                message: "请回答问题",
+              },
+            ],
+          })(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
+        </Form.Item>
+        <Divider
+          orientation="center"
+          style={{
+            fontSize: 19,
+            fontWeight: "bold",
+          }}
+        >
+          小E想听你说
+        </Divider>
+        <Form.Item
+          label="你希望未来能在E志者协会得到什么？又能为E志付出什么？"
+          {...questionItemLayout}
+        >
+          {getFieldDecorator("question2", {
+            rules: [
+              {
+                required: true,
+                message: "请填入问题的回答",
+              },
+            ],
+          })(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
+        </Form.Item>
+        <Form.Item {...tailFormItemLayout}>
+          <Button
+            icon="copy"
+            style={{ textAlign: "center" }}
+            type="primary"
+            htmlType="submit"
+          >
+            提交
+          </Button>
+          <Button
+            icon="save"
+            style={{ margin: "20px", textAlign: "center" }}
+            onClick={() => {
+              this.saveLocalStorage();
+              message.success("草稿已保存");
+            }}
+          >
+            保存草稿
+          </Button>
+        </Form.Item>
+        <Modal
+          title={this.state.isFinishSubmit ? "提交成功！" : "提交表单"}
+          visible={this.state.visible}
+          onOk={this.state.isFinishSubmit ? this.handleCancel : this.handleOk}
+          onCancel={this.handleCancel}
+          okText={this.state.isFinishSubmit ? "这就加群" : "提交"}
+          cancelText="我再想想"
+          confirmLoading={this.state.confirmLoading}
+        >
+          {ToolTips}
+        </Modal>
+      </Form>
+    );
+  }
 }
 
 const Sheet = Form.create({})(NewForm);

src/components/UploadToOSS.js

@@ -1,106 +1,120 @@
-import { Upload, Icon, message , Button , Avatar} from 'antd';
-import React from 'react';
-import axios from 'axios';
+import { Upload, Icon, message, Button, Avatar } from "antd";
+import React from "react";
+import axios from "axios";
 
 function getBase64(img, callback) {
-    const reader = new FileReader();
-    reader.addEventListener('load', () => callback(reader.result));
-    reader.readAsDataURL(img);
+  const reader = new FileReader();
+  reader.addEventListener("load", () => callback(reader.result));
+  reader.readAsDataURL(img);
 }
 
 class UploadToOSS extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            headers:{
-            },
-            fileData: null,
-        };
-    }
-
-
-    beforeUpload = (file)=>{
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-          message.error('只能上传JPG/PNG格式的图片哦！');
-        }
-        const isLt2M = file.size / 1024 / 1024 < 2;
-        if (!isLt2M) {
-          message.error('图像文件要小于2MB哦！');
-        }
-        if(!this.props.stuid){
-            message.error("请先填写学号！");
-        }
-        if (isJpgOrPng && isLt2M && this.props.stuid){
-            if(file.type === 'image/png') {
-                this.setState({headers:{            
-                    'Content-Type': 'application/octet-stream',
-                    'stuid':this.props.stuid,
-                    'pic-type':'png'}});
-            }else{
-                this.setState({headers:{            
-                    'Content-Type': 'application/octet-stream',
-                    'stuid':this.props.stuid,
-                    'pic-type':'jpg'}});
-            }
-            let reader = new FileReader();
-            reader.readAsArrayBuffer(file);
-            getBase64(file, imageUrl =>
-                this.setState({
-                    imageUrl,
-            }),)
-            return new Promise((resolve) => {
-                reader.onload = (e) => {
-                    this.setState({fileData:reader.result});
-                    resolve()
-                }
-            })
-        }else{
-            return false;
-        }
-    }
-    handleChange = info => {
-    
+  constructor(props) {
+    super(props);
+    this.state = {
+      headers: {},
+      fileData: null,
     };
-    customRequest = async () =>{
-        if(this.state.fileData === null){
-            message.error("图片未能正确读取哦！请重试！")
-            return
-        }
-        console.log(this.state.headers)
-        let result =  await axios(
-            'https://1299271970796699.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/oss_upload/upload/',
-            {
-                headers: this.state.headers,
-                method: "POST",
-                data: this.state.fileData,
-            }
-        )
-        if (result.data==="Success!") {
-            message.success("上传成功!(您还可以点击预览图继续上传以覆盖此次上传的图片)")
-        }else{
-            message.error("上传失败!可能是网络问题！")
-        }
-    }
+  }
 
-
-    render() {
-        const uploadButton = (
-            <Button style={{marginBlockEnd:24}}>
-                <Icon type="upload" /> 点击或拖拽文件到此处以上传照片
-            </Button>
-        );
-        const { imageUrl } = this.state;
-        return (
-        <Upload
-            showUploadList = {false}
-            beforeUpload={this.beforeUpload}
-            onChange={this.handleChange}
-            customRequest = {this.customRequest}
-        >
-            {imageUrl ?<Avatar shape="square" size={120} icon="user" src= {imageUrl} style={{marginBlockEnd:24}}/> : uploadButton}
-        </Upload>
-        );
+  beforeUpload = (file) => {
+    const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
+    if (!isJpgOrPng) {
+      message.error("只能上传JPG/PNG格式的图片哦！");
     }
+    const isLt2M = file.size / 1024 / 1024 < 5;
+    if (!isLt2M) {
+      message.error("图像文件要小于5MB哦！");
+    }
+    if (!this.props.stuid) {
+      message.error("请先填写学号哦！");
+    }
+    if (isJpgOrPng && isLt2M && this.props.stuid) {
+      if (file.type === "image/png") {
+        this.setState({
+          headers: {
+            "Content-Type": "application/octet-stream",
+            stuid: this.props.stuid,
+            "pic-type": "png",
+          },
+        });
+      } else {
+        this.setState({
+          headers: {
+            "Content-Type": "application/octet-stream",
+            stuid: this.props.stuid,
+            "pic-type": "jpg",
+          },
+        });
+      }
+      let reader = new FileReader();
+      reader.readAsArrayBuffer(file);
+      getBase64(file, (imageUrl) =>
+        this.setState({
+          imageUrl,
+        })
+      );
+      return new Promise((resolve) => {
+        reader.onload = (e) => {
+          this.setState({ fileData: reader.result });
+          resolve();
+        };
+      });
+    } else {
+      return false;
+    }
+  };
+  handleChange = (info) => {};
+  customRequest = async () => {
+    if (this.state.fileData === null) {
+      message.error("图片未能正确读取哦！请重试！");
+      return;
+    }
+    console.log(this.state.headers);
+    let result = await axios(
+      "https://1299271970796699.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/oss_upload/upload/",
+      {
+        headers: this.state.headers,
+        method: "POST",
+        data: this.state.fileData,
+      }
+    );
+    if (result.data === "Success!") {
+      message.success(
+        "上传成功!(您还可以点击预览图继续上传以覆盖此次上传的图片)"
+      );
+    } else {
+      message.error("上传失败!可能是网络问题！");
+    }
+  };
+
+  render() {
+    const uploadButton = (
+      <Button style={{ marginBlockEnd: 24 }}>
+        <Icon type="upload" /> 点击上传生活照(选填)
+      </Button>
+    );
+    const { imageUrl } = this.state;
+    return (
+      <Upload
+        showUploadList={false}
+        beforeUpload={this.beforeUpload}
+        onChange={this.handleChange}
+        customRequest={this.customRequest}
+      >
+        {imageUrl ? (
+          <Avatar
+            shape="square"
+            size={120}
+            icon="user"
+            src={imageUrl}
+            style={{ marginBlockEnd: 24 }}
+          />
+        ) : (
+          uploadButton
+        )}
+      </Upload>
+    );
+  }
 }
 export default UploadToOSS;

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/index.jsx

@@ -2,31 +2,18 @@
 /* eslint arrow-parens: 0 */
 import React from 'react';
 import { enquireScreen } from 'enquire-js';
-import Nav3 from "../Home/Nav3";
-import Pricing1 from './Pricing1';
-import Feature7 from './Feature7';
-import Content11 from './Content11';
-import Footer0 from '../Home/Footer0';
-import {
-  Pricing10DataSource,
-  Feature70DataSource,
-  Content110DataSource,
-} from './data.source';
+
+import Footer1 from './Footer1';
+
+import { Footer10DataSource } from './data.source';
 import './less/antMotionStyle.less';
-import '../Home/less/antMotionStyle.less';
-import {
-  Nav30DataSource,
 
-  Footer00DataSource,
-
-
-} from '../Home/data.source';
 let isMobile;
 enquireScreen((b) => {
   isMobile = b;
 });
 
-const { location } = window;
+const { location = {} } = typeof window !== 'undefined' ? window : {};
 
 export default class Home extends React.Component {
   constructor(props) {
@@ -56,31 +43,11 @@ export default class Home extends React.Component {
   }
 
   render() {
-
     const children = [
-
-      <Pricing1
-        id="Pricing1_0"
-        key="Pricing1_0"
-        dataSource={Pricing10DataSource}
-        isMobile={this.state.isMobile}
-      />,
-      <Feature7
-        id="Feature7_0"
-        key="Feature7_0"
-        dataSource={Feature70DataSource}
-        isMobile={this.state.isMobile}
-      />,
-      <Content11
-        id="Content11_0"
-        key="Content11_0"
-        dataSource={Content110DataSource}
-        isMobile={this.state.isMobile}
-      />,
-      <Footer0
-        id="Footer0_0"
-        key="Footer0_0"
-        dataSource={Footer00DataSource}
+      <Footer1
+        id="Footer1_0"
+        key="Footer1_0"
+        dataSource={Footer10DataSource}
         isMobile={this.state.isMobile}
       />,
     ];

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

@@ -1,10 +1,28 @@
 
-@import "~antd/lib/style/v2-compatible-reset.less";
+// @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;

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

@@ -5,17 +5,10 @@ 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';
-  let children;
-  switch (item.name) {
-    case 'image':
-      children = React.createElement('img', { src: item.children, alt: 'img' });
-      break;
-    case 'a':
-      children = React.createElement('a', { href: item.href }, [item.children]);
-      break;
-    default:
-      children = item.children;
-  }
+  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