新的主页

还有几个链接问题

src/App.js

@@ -1,30 +1,46 @@
-import React from "react";
+import React, { Component } from 'react';
+
 import { HashRouter, Route, Switch, Link } from "react-router-dom";
-import LearnMore from "./components/LearnMore";
+import { enquireScreen } from 'enquire-js';
-import History from "./components/History";
+import LearnMore from "./LearnMore";
-import Entry from "./";
+import Home from './Home/main';
-import Main from "./components/Main";
+import Page2 from "./Home/history";
+
+
+import Entry from "./Entry";
 import Login from "./components/Login";
-function App() {
+let isMobile;
-  return (
+enquireScreen((b) => {
-    <div className="App">
+  isMobile = b;
-      <header className="App-header">
+});
-        <div className="App">
-          <HashRouter>
-            <Switch>
-              <Route exact path='/history' component={History} />
-              <Route exact path='/ticket' component={Entry} />
-              <Route exact path='/' component={Main} />
-              <Route exact path='/learnMore' component={LearnMore} />
-              <Route exact path='/login' component={Login} />
-            </Switch>
-          </HashRouter>
-        </div>
 
-
+class App extends Component {
-      </header>
+  constructor(props) {
+    super(props);
+    this.state = {
+      isMobile,
+    };
+  }
+  componentDidMount() {
+    enquireScreen((b) => {
+      this.setState({ isMobile: !!b });
+    });
+  }
+  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='/learnMore' component={LearnMore} />
+          <Route exact path='/login' component={Login} />
+        </Switch>
+      </HashRouter>
     </div>
-  );
+
+    );
+  }
 }
 
 export default App;

src/Entry.js

@@ -1,27 +1,27 @@
 import React from 'react';
-import Sheet from './Component/Sheet';
+import Sheet from './components/Sheet';
-import { Upload, Button, Icon,BackTop } from 'antd';
+import { Upload, Button, Icon, BackTop } from 'antd';
 
 function Entry() {
   return (
-  <div>
+    <div>
-  <h2 class="ant-typography" style={{ textAlign: 'center' }}>
+      <h2 class="ant-typography" style={{ textAlign: 'center' }}>
-    浙江大学学生E志者协会2020年纳新报名表
+        浙江大学学生E志者协会2020年纳新报名表
   </h2>
-  <center>
+      <center>
-    <Upload>
+        <Upload>
-      <Button   style={{marginBlockEnd:20}}>
+          <Button style={{ marginBlockEnd: 20 }}>
-        <Icon type="upload" /> 
+            <Icon type="upload" />
-        上传照片
+            上传照片
       </Button>
-    </Upload>
+        </Upload>
-  </center>
+      </center>
-  <Sheet />
+      <Sheet />
-  <BackTop visibilityHeight={200} />
+      <BackTop visibilityHeight={200} />
-  <p style={{textAlign: 'center'}}>
+      <p style={{ textAlign: 'center' }}>
-    浙江大学学生E志者协会©2020 Created by EVATech
+        浙江大学学生E志者协会©2020 Created by EVATech
   </p>
-  </ div>
+    </ div>
   )
 }
 

src/Home/Banner3.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Button } from 'antd';
+import QueueAnim from 'rc-queue-anim';
+import Texty from 'rc-texty';
+import 'rc-texty/assets/index.css';
+
+class Banner extends React.PureComponent {
+  render() {
+    const { ...currentProps } = this.props;
+    const { dataSource } = currentProps;
+    delete currentProps.dataSource;
+    delete currentProps.isMobile;
+    const children = dataSource.textWrapper.children.map((item) => {
+      const { name, texty, ...$item } = item;
+      if (name.match('button')) {
+        return (
+          <Button type="primary" key={name} {...$item}>
+            {item.children}
+          </Button>
+        );
+      }
+
+      return (
+        <div key={name} {...$item}>
+          {texty ? (
+            <Texty type="mask-bottom">{item.children}</Texty>
+          ) : (
+            item.children
+          )}
+        </div>
+      );
+    });
+    return (
+      <div {...currentProps} {...dataSource.wrapper}>
+        <QueueAnim
+          key="QueueAnim"
+          type={['bottom', 'top']}
+          delay={200}
+          {...dataSource.textWrapper}
+        >
+          {children}
+        </QueueAnim>
+      </div>
+    );
+  }
+}
+export default Banner;

src/Home/Content11.jsx

@@ -0,0 +1,40 @@
+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/Home/Content3.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 Content3 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 Content3;

src/Home/Content5.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Row, Col } from 'antd';
+import { TweenOneGroup } from 'rc-tween-one';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import { getChildrenToRender } from './utils';
+
+class Content5 extends React.PureComponent {
+  getChildrenToRender = (data) =>
+    data.map((item) => {
+      return (
+        <Col key={item.name} {...item}>
+          <div {...item.children.wrapper}>
+            <span {...item.children.img}>
+              <img src={item.children.img.children} height="100%" alt="img" />
+            </span>
+            <p {...item.children.content}>{item.children.content.children}</p>
+          </div>
+        </Col>
+      );
+    });
+
+  render() {
+    const { ...props } = this.props;
+    const { dataSource } = props;
+    delete props.dataSource;
+    delete props.isMobile;
+    const childrenToRender = this.getChildrenToRender(
+      dataSource.block.children
+    );
+    return (
+      <div {...props} {...dataSource.wrapper}>
+        <div {...dataSource.page}>
+          <div key="title" {...dataSource.titleWrapper}>
+            {dataSource.titleWrapper.children.map(getChildrenToRender)}
+          </div>
+          <OverPack
+            className={`content-template ${props.className}`}
+            {...dataSource.OverPack}
+          >
+            <TweenOneGroup
+              component={Row}
+              key="ul"
+              enter={{
+                y: '+=30',
+                opacity: 0,
+                type: 'from',
+                ease: 'easeInOutQuad',
+              }}
+              leave={{ y: '+=30', opacity: 0, ease: 'easeInOutQuad' }}
+              {...dataSource.block}
+            >
+              {childrenToRender}
+            </TweenOneGroup>
+          </OverPack>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Content5;

src/Home/Content9.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import QueueAnim from 'rc-queue-anim';
+import { getChildrenToRender } from './utils';
+
+class Content9 extends React.PureComponent {
+  getBlockChildren = (block, i) => {
+    const { isMobile } = this.props;
+    const item = block.children;
+    const textWrapper = (
+      <QueueAnim
+        key="text"
+        leaveReverse
+        delay={isMobile ? [0, 100] : 0}
+        {...item.textWrapper}
+      >
+        <div key="time" {...item.time}>
+          {item.time.children}
+        </div>
+        <h2 key="title" {...item.title}>
+          <i {...item.icon}>
+            <img src={item.icon.children} alt="img" />
+          </i>
+          {item.title.children}
+        </h2>
+        <div key="p" {...item.content}>
+          {item.content.children}
+        </div>
+      </QueueAnim>
+    );
+    return (
+      <OverPack key={i.toString()} {...block}>
+        {isMobile && textWrapper}
+        <QueueAnim
+          className="image-wrapper"
+          key="image"
+          type={isMobile ? 'right' : 'bottom'}
+          leaveReverse
+          delay={isMobile ? [100, 0] : 0}
+          {...item.imgWrapper}
+        >
+          <div key="image" {...item.img}>
+            <img src={item.img.children} alt="img" />
+          </div>
+          <div key="name" className="name-wrapper">
+            <div key="name" {...item.name}>
+              {item.name.children}
+            </div>
+            <div key="post" {...item.post}>
+              {item.post.children}
+            </div>
+          </div>
+        </QueueAnim>
+
+        {!isMobile && textWrapper}
+      </OverPack>
+    );
+  };
+
+  render() {
+    const { ...props } = this.props;
+    const { dataSource } = props;
+    delete props.dataSource;
+    delete props.isMobile;
+    const children = dataSource.block.children.map(this.getBlockChildren);
+    return (
+      <div {...props} {...dataSource.wrapper}>
+        <div {...dataSource.page}>
+          <div {...dataSource.titleWrapper}>
+            {dataSource.titleWrapper.children.map(getChildrenToRender)}
+          </div>
+          <div {...dataSource.block}>{children}</div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Content9;

src/Home/Feature1.jsx

@@ -0,0 +1,70 @@
+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';
+
+function Content1(props) {
+  const { ...tagProps } = props;
+  const { dataSource, isMobile } = tagProps;
+  delete tagProps.dataSource;
+  delete tagProps.isMobile;
+  const animType = {
+    queue: isMobile ? 'bottom' : 'right',
+    one: isMobile
+      ? {
+          scaleY: '+=0.3',
+          opacity: 0,
+          type: 'from',
+          ease: 'easeOutQuad',
+        }
+      : {
+          x: '-=30',
+          opacity: 0,
+          type: 'from',
+          ease: 'easeOutQuad',
+        },
+  };
+  return (
+    <div {...tagProps} {...dataSource.wrapper}>
+      <OverPack {...dataSource.OverPack} component={Row}>
+        <TweenOne
+          key="img"
+          animation={animType.one}
+          resetStyle
+          {...dataSource.imgWrapper}
+          component={Col}
+          componentProps={{
+            md: dataSource.imgWrapper.md,
+            xs: dataSource.imgWrapper.xs,
+          }}
+        >
+          <span {...dataSource.img}>
+            <img src={dataSource.img.children} width="100%" alt="img" />
+          </span>
+        </TweenOne>
+        <QueueAnim
+          key="text"
+          type={animType.queue}
+          leaveReverse
+          ease={['easeOutQuad', 'easeInQuad']}
+          {...dataSource.textWrapper}
+          component={Col}
+          componentProps={{
+            md: dataSource.textWrapper.md,
+            xs: dataSource.textWrapper.xs,
+          }}
+        >
+          <h2 key="h1" {...dataSource.title}>
+            {dataSource.title.children}
+          </h2>
+          <div key="p" {...dataSource.content}>
+            {dataSource.content.children}
+          </div>
+        </QueueAnim>
+      </OverPack>
+    </div>
+  );
+}
+
+export default Content1;

src/Home/Feature2.jsx

@@ -0,0 +1,74 @@
+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';
+
+function Content2(props) {
+  const { ...tagProps } = props;
+  const { dataSource, isMobile } = tagProps;
+  delete tagProps.dataSource;
+  delete tagProps.isMobile;
+  const animType = {
+    queue: isMobile ? 'bottom' : 'left',
+    one: isMobile
+      ? {
+          scaleY: '+=0.3',
+          opacity: 0,
+          type: 'from',
+          ease: 'easeOutQuad',
+        }
+      : {
+          x: '+=30',
+          opacity: 0,
+          type: 'from',
+          ease: 'easeOutQuad',
+        },
+  };
+  const img = (
+    <TweenOne
+      key="img"
+      animation={animType.one}
+      resetStyle
+      {...dataSource.imgWrapper}
+      component={Col}
+      componentProps={{
+        md: dataSource.imgWrapper.md,
+        xs: dataSource.imgWrapper.xs,
+      }}
+    >
+      <span {...dataSource.img}>
+        <img src={dataSource.img.children} width="100%" alt="img" />
+      </span>
+    </TweenOne>
+  );
+  return (
+    <div {...tagProps} {...dataSource.wrapper}>
+      <OverPack {...dataSource.OverPack} component={Row}>
+        {isMobile && img}
+        <QueueAnim
+          type={animType.queue}
+          key="text"
+          leaveReverse
+          ease={['easeOutCubic', 'easeInCubic']}
+          {...dataSource.textWrapper}
+          component={Col}
+          componentProps={{
+            md: dataSource.textWrapper.md,
+            xs: dataSource.textWrapper.xs,
+          }}
+        >
+          <h2 key="h1" {...dataSource.title}>
+            {dataSource.title.children}
+          </h2>
+          <div key="p" {...dataSource.content}>
+            {dataSource.content.children}
+          </div>
+        </QueueAnim>
+        {!isMobile && img}
+      </OverPack>
+    </div>
+  );
+}
+
+export default Content2;

src/Home/Feature6.jsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import QueueAnim from 'rc-queue-anim';
+import { Carousel as AntCarousel, Row, Col } from 'antd';
+import TweenOne from 'rc-tween-one';
+import Children from 'rc-tween-one/lib/plugin/ChildrenPlugin';
+
+TweenOne.plugins.push(Children);
+
+class Feature6 extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.carouselRef = React.createRef();
+    this.state = {
+      current: 0,
+    };
+  }
+
+  onTitleClick = (_, i) => {
+    const carouselRef = this.carouselRef.current.childRefs.carousel;
+    carouselRef.goTo(i);
+  };
+
+  onBeforeChange = (_, newIndex) => {
+    this.setState({
+      current: newIndex,
+    });
+  };
+
+  getChildrenToRender = (dataSource) => {
+    const { current } = this.state;
+    const { Carousel } = dataSource;
+    const {
+      titleWrapper,
+      children: childWrapper,
+      wrapper,
+      ...carouselProps
+    } = Carousel;
+
+    const {
+      barWrapper,
+      title: titleChild,
+      ...titleWrapperProps
+    } = titleWrapper;
+    const titleToRender = [];
+
+    const childrenToRender = childWrapper.map((item, ii) => {
+      const { title, children, ...itemProps } = item;
+      titleToRender.push(
+        <div
+          {...title}
+          key={ii.toString()}
+          onClick={(e) => {
+            this.onTitleClick(e, ii);
+          }}
+          className={
+            ii === current ? `${title.className || ''} active` : title.className
+          }
+        >
+          {title.children}
+        </div>
+      );
+      const childrenItem = children.map(($item, i) => {
+        const { number, children: child, ...childProps } = $item;
+        const numberChild = number.children.replace(/[^0-9.-]/g, '');
+        const { unit, toText, ...numberProps } = number;
+        return (
+          <Col {...childProps} key={i.toString()}>
+            <TweenOne
+              {...numberProps}
+              animation={{
+                Children: {
+                  value: parseFloat(numberChild),
+                  floatLength:
+                    parseFloat(numberChild) -
+                      Math.floor(parseFloat(numberChild)) >
+                    0
+                      ? 2
+                      : 0,
+                  formatMoney: true,
+                },
+                duration: 1000,
+                delay: 300,
+                ease: 'easeInOutCirc',
+              }}
+              component="span"
+            >
+              0
+            </TweenOne>
+            {unit && <span {...unit}>{unit.children}</span>}
+            <p {...child}>{child.children}</p>
+          </Col>
+        );
+      });
+      return (
+        <QueueAnim
+          type="bottom"
+          component={Row}
+          {...itemProps}
+          key={ii.toString()}
+        >
+          {childrenItem}
+        </QueueAnim>
+      );
+    });
+
+    const width = 100 / childrenToRender.length;
+    return (
+      <QueueAnim
+        key="queue"
+        leaveReverse
+        type="bottom"
+        delay={[0, 100]}
+        {...wrapper}
+        ref={this.carouselRef}
+      >
+        <div {...titleWrapperProps} key="title">
+          <div {...titleChild}>
+            {titleToRender}
+            <div
+              {...barWrapper}
+              style={{
+                width: `${width}%`,
+                left: `${width * current}%`,
+              }}
+            >
+              <em {...barWrapper.children} />
+            </div>
+          </div>
+        </div>
+        <AntCarousel
+          {...carouselProps}
+          key="carousel"
+          infinite={false}
+          beforeChange={this.onBeforeChange}
+        >
+          {childrenToRender}
+        </AntCarousel>
+      </QueueAnim>
+    );
+  };
+
+  render() {
+    const { dataSource, isMobile, ...props } = this.props;
+    return (
+      <div {...props} {...dataSource.wrapper}>
+        <div>
+          <OverPack {...dataSource.OverPack}>
+            {this.getChildrenToRender(dataSource)}
+          </OverPack>
+        </div>
+      </div>
+    );
+  }
+}
+export default Feature6;

src/Home/Feature8.jsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import QueueAnim from 'rc-queue-anim';
+import { Carousel as AntCarousel, Row, Col } from 'antd';
+import { getChildrenToRender } from './utils';
+
+class Feature8 extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.carouselRef = React.createRef();
+    this.state = {
+      current: 0,
+    };
+  }
+
+  onTitleClick = (_, i) => {
+    const carouselRef = this.carouselRef.current.childRefs.carousel;
+    carouselRef.goTo(i);
+  };
+
+  onBeforeChange = (_, newIndex) => {
+    this.setState({
+      current: newIndex,
+    });
+  };
+
+  getChildrenToRender = (dataSource) => {
+    const { current } = this.state;
+    const { Carousel, childWrapper: buttonWrapper } = dataSource;
+    const { children: carouselChild, wrapper, ...carouselProps } = Carousel;
+    const {
+      titleWrapper,
+      children: childWrapper,
+      ...childrenProps
+    } = carouselChild;
+
+    const {
+      barWrapper,
+      title: titleChild,
+      ...titleWrapperProps
+    } = titleWrapper;
+    const titleToRender = [];
+
+    const childrenToRender = childWrapper.map((item, ii) => {
+      const { title, children: childRow, ...rowProps } = item;
+      if (childWrapper.length > 1) {
+        titleToRender.push(
+          <div
+            {...title}
+            key={ii.toString()}
+            onClick={(e) => {
+              this.onTitleClick(e, ii);
+            }}
+            className={
+              ii === current
+                ? `${title.className || ''} active`
+                : title.className
+            }
+          >
+            {title.children}
+          </div>
+        );
+      }
+      const childrenItem = childRow.map(($item, i) => {
+        const { children: colChild, arrow, ...colProps } = $item;
+        const { ...childProps } = colChild;
+        return (
+          <Col {...colProps} key={i.toString()}>
+            <div {...childProps}>
+              {colChild.children.map(getChildrenToRender)}
+            </div>
+            {arrow && (
+              <div {...arrow}>
+                <img src={arrow.children} alt="img" />
+              </div>
+            )}
+          </Col>
+        );
+      });
+
+      return (
+        <div key={ii.toString()}>
+          <QueueAnim
+            component={Row}
+            type="bottom"
+            componentProps={{ type: 'flex' }}
+            {...rowProps}
+          >
+            {childrenItem}
+          </QueueAnim>
+        </div>
+      );
+    });
+
+    return (
+      <QueueAnim
+        key="queue"
+        type="bottom"
+        ref={this.carouselRef}
+        {...childrenProps}
+      >
+        {childWrapper.length > 1 && (
+          <div {...titleWrapperProps} key="title">
+            <div {...titleChild}>{titleToRender}</div>
+          </div>
+        )}
+        <AntCarousel
+          key="carousel"
+          {...carouselProps}
+          infinite={false}
+          beforeChange={this.onBeforeChange}
+        >
+          {childrenToRender}
+        </AntCarousel>
+        <div key="button" {...buttonWrapper}>
+          {buttonWrapper.children.map(getChildrenToRender)}
+        </div>
+      </QueueAnim>
+    );
+  };
+
+  render() {
+    const { dataSource, isMobile, ...props } = this.props;
+    const { titleWrapper } = dataSource;
+    return (
+      <div {...props} {...dataSource.wrapper}>
+        <div {...dataSource.page}>
+          <div {...dataSource.titleWrapper}>
+            {titleWrapper.children.map(getChildrenToRender)}
+          </div>
+          <OverPack {...dataSource.OverPack}>
+            {this.getChildrenToRender(dataSource)}
+          </OverPack>
+        </div>
+      </div>
+    );
+  }
+}
+export default Feature8;

src/Home/Footer0.jsx

@@ -0,0 +1,27 @@
+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/Nav3.jsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import TweenOne from 'rc-tween-one';
+import { Menu } from 'antd';
+import { getChildrenToRender } from './utils';
+
+const { Item, SubMenu } = Menu;
+
+class Header3 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      phoneOpen: undefined,
+    };
+  }
+
+  phoneClick = () => {
+    const phoneOpen = !this.state.phoneOpen;
+    this.setState({
+      phoneOpen,
+    });
+  };
+
+  render() {
+    const { dataSource, isMobile, ...props } = this.props;
+    const { phoneOpen } = this.state;
+    const navData = dataSource.Menu.children;
+    const navChildren = navData.map((item) => {
+      const { children: a, subItem, ...itemProps } = item;
+      if (subItem) {
+        return (
+          <SubMenu
+            key={item.name}
+            {...itemProps}
+            title={
+              <div
+                {...a}
+                className={`header3-item-block ${a.className}`.trim()}
+              >
+                {a.children.map(getChildrenToRender)}
+              </div>
+            }
+            popupClassName="header3-item-child"
+          >
+            {subItem.map(($item, ii) => {
+              const { children: childItem } = $item;
+              const child = childItem.href ? (
+                <a {...childItem}>
+                  {childItem.children.map(getChildrenToRender)}
+                </a>
+              ) : (
+                <div {...childItem}>
+                  {childItem.children.map(getChildrenToRender)}
+                </div>
+              );
+              return (
+                <Item key={$item.name || ii.toString()} {...$item}>
+                  {child}
+                </Item>
+              );
+            })}
+          </SubMenu>
+        );
+      }
+      return (
+        <Item key={item.name} {...itemProps}>
+          <a {...a} className={`header3-item-block ${a.className}`.trim()}>
+            {a.children.map(getChildrenToRender)}
+          </a>
+        </Item>
+      );
+    });
+    const moment = phoneOpen === undefined ? 300 : null;
+    return (
+      <TweenOne
+        component="header"
+        animation={{ opacity: 0, type: 'from' }}
+        {...dataSource.wrapper}
+        {...props}
+      >
+        <div
+          {...dataSource.page}
+          className={`${dataSource.page.className}${phoneOpen ? ' open' : ''}`}
+        >
+          <TweenOne
+            animation={{ x: -30, type: 'from', ease: 'easeOutQuad' }}
+            {...dataSource.logo}
+          >
+            <img width="100%" src={dataSource.logo.children} alt="img" />
+          </TweenOne>
+          {isMobile && (
+            <div
+              {...dataSource.mobileMenu}
+              onClick={() => {
+                this.phoneClick();
+              }}
+            >
+              <em />
+              <em />
+              <em />
+            </div>
+          )}
+          <TweenOne
+            {...dataSource.Menu}
+            animation={
+              isMobile
+                ? {
+                    x: 0,
+                    height: 0,
+                    duration: 300,
+                    onComplete: (e) => {
+                      if (this.state.phoneOpen) {
+                        e.target.style.height = 'auto';
+                      }
+                    },
+                    ease: 'easeInOutQuad',
+                  }
+                : null
+            }
+            moment={moment}
+            reverse={!!phoneOpen}
+          >
+            <Menu
+              mode={isMobile ? 'inline' : 'horizontal'}
+              defaultSelectedKeys={['sub0']}
+              theme="light"
+            >
+              {navChildren}
+            </Menu>
+          </TweenOne>
+        </div>
+      </TweenOne>
+    );
+  }
+}
+
+export default Header3;

src/Home/Point.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Link from 'rc-scroll-anim/lib/ScrollLink';
+
+export default function Point(props) {
+  const { data, size, position, type, stroke } = props;
+  const children = data.map((item) => {
+    if (item.match('nav') || item.match('footer')) {
+      return null;
+    }
+    const className = `point ${type} ${stroke} ${size}`.trim();
+    return (
+      <Link
+        key={item}
+        className={className}
+        to={item}
+        toHash={false}
+      />
+    );
+  }).filter((item) => item);
+  const wrapperClass = `point-wrapper ${position} ${size}`.trim();
+  return (
+    <div
+      className={wrapperClass}
+    >
+      <div>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+Point.defaultProps = {
+  size: '',
+  position: '',
+  type: '',
+  stroke: '',
+};

src/Home/history.jsx

@@ -0,0 +1,105 @@
+/* eslint no-undef: 0 */
+/* eslint arrow-parens: 0 */
+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';
+let isMobile;
+enquireScreen((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 请删除
+        };
+    }
+
+    componentDidMount() {
+        // 适配手机屏幕;
+        enquireScreen((b) => {
+            this.setState({ isMobile: !!b });
+        });
+        // dva 2.0 样式在组件渲染之后动态加载，导致滚动组件不生效；线上不影响；
+        /* 如果不是 dva 2.0 请删除 start */
+        if (location.port) {
+            // 样式 build 时间在 200-300ms 之间;
+            setTimeout(() => {
+                this.setState({
+                    show: true,
+                });
+            }, 500);
+        }
+        /* 如果不是 dva 2.0 请删除 end */
+    }
+
+    render() {
+        const children = [
+            <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}
+            />,
+            <Footer0
+                id="Footer0_0"
+                key="Footer0_0"
+                dataSource={Footer00DataSource}
+                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,5 +1,17 @@
 @import './common.less';
 @import './custom.less';
+@import './point.less';
 @import './content.less';
-@import './teams1.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';

src/Home/less/banner3.less

@@ -0,0 +1,91 @@
+@banner3: banner3;
+.@{banner3} {
+  // 如果在第一屏且导航位置为 relative, 一屏为 height: calc(~"100vh - 64px");
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  text-align: center;
+  border-color: #666;
+  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;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    left: 0;
+    right: 0;
+    color: @template-text-color-light;
+    max-width: 845px;
+    height: 500px;
+    width: 80%;
+    font-size: 20px;
+    line-height: 28px;
+    font-weight: 400;
+    >.queue-anim-leaving {
+      position: relative !important;
+    }
+  }
+  & &-slogan {
+    font-size: 68px;
+    line-height: 80px;
+    text-indent: 2px;
+    font-weight: 600;
+    margin: 26px auto 38px;
+    overflow: hidden;
+  }
+  & &-name-en {
+    display: block;
+    font-size: 14px;
+    line-height: 32px;
+    font-weight: 400;
+  }
+  & &-name {
+    font-size: 24px;
+    overflow: hidden;
+    opacity: 0.8;
+  }
+  & &-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%);
+    box-shadow: 0 8px 16px #0a52ab;
+    border: none;
+    transition: background .45s @ease-out;
+    width: 132px;
+    line-height: 42px;
+    height: 42px;
+    border-radius: 42px;
+  }
+  & &-time {
+    font-size: 14px;
+    line-height: 24px;
+    margin-top: 24px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{banner3} {
+    background-attachment: inherit;
+    & &-text-wrapper {
+      width: 90%;
+      height: 50%;
+    }
+    & &-name-en {
+      font-size: 12px;
+    }
+    & &-slogan {
+      font-size: 24px;
+      line-height: 1.5;
+      margin: 12px 0;
+    }
+    & &-name {
+      font-size: 14px;
+    }
+  }
+}

src/Home/less/content11.less

@@ -0,0 +1,46 @@
+@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/Home/less/content3.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/content5.less

@@ -0,0 +1,69 @@
+@content5: content5;
+.@{content5}-wrapper {
+  background-color: #fafafa;
+  min-height: 720px;
+  .@{content5} {
+    >p {
+      text-align: center;
+    }
+    &-img-wrapper {
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+      .block {
+        margin-bottom: 24px;
+        .content5-block-content {
+          display: block;
+          background: #fff;
+          border-radius: 4px;
+          padding: 10px;
+          text-align: center;
+          position: relative;
+          overflow: hidden;
+          .page-pro();
+          border: none;
+          transition: box-shadow .3s @ease-out, transform .3s @ease-out;
+          & > span {
+            width: 100%;
+            height: 200px;
+            display: block;
+            background: @line-color;
+            padding: 0px;
+          }
+          & p {
+            width: 100%;
+            line-height: 30px;
+          }
+          &:hover {
+            & p {
+              bottom: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{content5}-wrapper {
+    height: 2000px;
+    overflow: hidden;
+    .@{content5} {
+      ul {
+        li {
+          display: block;
+          width: 100%;
+          padding: 2%;
+          span {
+            height: 168px;
+          }
+          p {
+            position: relative;
+            bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}

src/Home/less/content9.less

@@ -0,0 +1,145 @@
+@content9: content9;
+@text-color: rgba(0, 0, 0, 0.85);
+@text-color2: #697b8c;
+.@{content9}-wrapper {
+  padding-bottom: 64px;
+  &.home-page-wrapper {
+    overflow: initial;
+  }
+  .@{content9} {
+    min-height: 800px;
+    padding: 64px 0 0;
+  }
+  .timeline {
+    position: relative;
+    &:before {
+      display: block;
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 0;
+      width: 0;
+      height: ~"calc(100% - 108px)";
+      margin: 34px 0;
+      border-left: 2px #ebedf0 dashed;
+    }
+  }
+  .block-wrapper {
+    color: @text-color;
+    display: flex;
+    position: relative;
+    margin-bottom: 70px;
+    min-height: 160px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .image-wrapper,
+  .text-wrapper {
+    width: 50%;
+  }
+  .image-wrapper {
+    text-align: center;
+    .block-img,
+    .name-wrapper {
+      float: right;
+      clear: both;
+      width: 262px;
+      margin: auto;
+    }
+    .block-img {
+      height: 98px;
+      img {
+        height: 100%;
+      }
+    }
+    .name-wrapper {
+      margin: 16px 0 0;
+      .block-name {
+        font-size: 14px;
+        margin-bottom: 4px;
+      }
+      .block-post {
+        font-size: 12px;
+        color: @text-color2;
+      }
+    }
+  }
+  .text-wrapper {
+    padding-left: 40px;
+    .block-time {
+      font-size: 12px;
+      color: @text-color2;
+      line-height: 18px;
+      min-height: 18px;
+    }
+    .block-title {
+      margin: 8px 0 12px;
+      font-size: 14px;
+      position: relative;
+      min-height: 18px;
+    }
+    .block-icon {
+      position: absolute;
+      left: -40px;
+      transform: translateX(~"calc(-50% + 1px)");
+    }
+    .block-content {
+      width: 300px;
+      color: #314659;
+      font-size: 12px;
+      min-height: 18px;
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{content9}-wrapper {
+    padding-bottom: 0;
+    .@{content9} {
+      padding: 64px 24px;
+    }
+    .timeline {
+      &:before {
+        left: 0;
+        height: 100%;
+        margin: 0;
+      }
+    }
+    .block-wrapper {
+      display: block;
+      min-height: 100px;
+      margin-bottom: 54px;
+    }
+    .image-wrapper,
+    .text-wrapper {
+      width: 100%;
+    }
+    .image-wrapper {
+      .block-img {
+        display: none;
+      }
+      .name-wrapper {
+        text-align: left;
+        float: left;
+        width: 100%;
+        padding-left: 40px;
+        margin: auto;
+      }
+      .block-name, .block-post {
+        display: inline-block;
+      }
+      .block-name {
+        margin-right: 8px;
+      }
+    }
+    .text-wrapper {
+      .block-content {
+        display: none;
+      }
+      .block-title {
+        font-size: 16px;
+      }
+    }
+  }
+}

src/Home/less/edit.less

@@ -1,5 +1,253 @@
+#Content3_0 .ant-col > .content3-text > .k6bwga0pdy-editor_css {
+  display: flex;
+  align-items: flex-start;
+  opacity: 0.35;
+  border-top-color: rgba(150, 79, 79, 0);
+  border-right-color: rgba(134, 55, 55, 0);
+  border-bottom-color: rgba(134, 55, 55, 0);
+  border-left-color: rgba(211, 57, 57, 0);
+}
+#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-attachment: scroll;
+  background-blend-mode: normal;
+  background-position: 0% 0%;
+  background-repeat: repeat;
+  background-size: auto;
+  background-clip: padding-box;
+}
+#Content3_0 div > .ant-row > .k6bwib6y3rr-editor_css {
+  display: block;
+  font-size: 20px;
+  font-weight: 400;
+  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-attachment: scroll;
+  background-blend-mode: normal;
+  background-position: 0% 0%;
+  background-repeat: repeat;
+  background-size: auto;
+  background-clip: padding-box;
+  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%;
+  background-repeat: repeat;
+  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;
+  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.35);
+}
+#Banner3_1 .banner3-text-wrapper > .k6bx9qqmas-editor_css {
+  color: rgb(255, 0, 0);
+  margin: 100px 100px;
+}
+#Banner3_1 .banner3-text-wrapper > .k6bxcnb8hlg-editor_css {
+  font-family: Tahoma;
+  font-size: 23px;
+  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;
+}
+#Content3_0 .ant-row > .ant-col > .k6byzxwmha-editor_css {
+  display: none;
+}
+#Content3_0 .ant-row > .ant-col > .k6byp0r4zad-editor_css {
+  display: none;
+}
+#Content3_0 .ant-row > .ant-col > .k6bz0rscbc6-editor_css {
+  display: none;
+}
+#Content3_0 .ant-row > .ant-col > .k6byxtosuua-editor_css {
+  display: none;
+}
+#Content3_0 .ant-row > .ant-col > .k6bz0x5q5u-editor_css {
+  display: none;
+}
+#Content3_0 .home-page > .title-wrapper > .k6byq9vtkee-editor_css {
+  margin: 0px 0 16px;
+}
+#Feature2_0 .ant-row > .ant-col > .k6bz79j5xeo-editor_css {
+  text-align: center;
+}
+#Feature2_0 .ant-row > .ant-col > .k6bzcb3z43g-editor_css {
+}
+#Content3_0 .home-page > .title-wrapper > .k6bz1fy4zto-editor_css {
+  font-size: 15px;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c0oc6qv0m-editor_css {
+  font-size: 16px;
+  padding: 30px;
+}
+#Feature8_0 div > .ant-row-flex > .k6c0r7negkf-editor_css {
+  margin: 36px 0px;
+  padding: 0 60px;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c0s91863l-editor_css {
+  margin: 0px;
+  padding: 20px;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c0vx6j656-editor_css {
+  display: none;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c0s334dxi-editor_css {
+  display: none;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c0x19mrup-editor_css {
+  display: none;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c0y0a2yx-editor_css {
+  display: none;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c0x9xg18b-editor_css {
+  font-weight: 300;
+  color: #404040;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c10o2f0x-editor_css {
+  display: none;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c12xz3kb-editor_css {
+  display: none;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c0huzztn9-editor_css {
+  font-size: 20px;
+  font-weight: 500;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c169bqlul-editor_css {
+  font-size: 20px;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c16ctkdmf-editor_css {
+  font-size: 20px;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c17cdd2tk-editor_css {
+  font-size: 20px;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c17hbe4aq-editor_css {
+  font-size: 20px;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c17kho4rt-editor_css {
+  font-size: 20px;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c17nnk41k-editor_css {
+  font-size: 20px;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c18wg896n-editor_css {
+  display: none;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c18yxsvf-editor_css {
+  display: none;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c1dfyt0he-editor_css {
+  display: none;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c1dj5lecd-editor_css {
+  display: none;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c1crpbwn-editor_css {
+  font-size: 20px;
+  text-align: center;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c1dlcixg-editor_css {
+  font-size: 20px;
+  text-align: center;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c2haip0st-editor_css {
+  display: none;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c2h8wti1-editor_css {
+  display: none;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c2hgg3bfc-editor_css {
+  font-size: 20px;
+  text-align: center;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c2ijput1f-editor_css {
+  display: none;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c2ibp6dfh-editor_css {
+  display: none;
+}
+#Feature8_0 .ant-col > .feature8-block-child > .k6c2imvlib-editor_css {
+  font-size: 20px;
+  text-align: center;
+}
+#Content3_0 .k6c2jyfzwv-editor_css {
+  border-top-width: 1px;
+}
+#Content3_0 div > .ant-row > .k6c2kk8agk-editor_css {
+  border-top-style: dashed;
+  border-right-style: dashed;
+  border-bottom-style: dashed;
+  border-left-style: dashed;
+  border-color: rgba(189, 25, 25, 0);
+  border-top-width: 1px;
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+}
+#Content9_0 .timeline > .block-wrapper > .k6c37bgt0io-editor_css {
+  width: 100%;
+}
+#Content9_0 .block-wrapper > .image-wrapper > .k6c3b63w63l-editor_css {
+  display: none;
+}
+#Content9_0 .image-wrapper > .name-wrapper > .k6c3bvphdf-editor_css {
+  display: none;
+}
+#Content9_0 .image-wrapper > .name-wrapper > .k6c3bgi5wr-editor_css {
+  font-size: 20px;
+}
 #Teams1_0 .ant-row > .ant-col > .k6d84n0pi88-editor_css {
-  width: 20px;
+  width: 320px;
   clear: both;
 }
 #Teams1_0 .ant-row > .ant-col > .k6d8cd2spqg-editor_css {
@@ -11,3 +259,53 @@
 #Teams1_0 .ant-row > .ant-col > .k6d8cnw0kx-editor_css {
   font-size: 20px;
 }
+#Content11_0 .title-wrapper > .k6lxsmos5a-editor_css {
+  font-size: 18px;
+  text-align: left;
+  padding: 0 30px 0 10px;
+}
+#Content11_0 .title-wrapper > .k6lxlv638d8-editor_css {
+  font-size: 18px;
+  text-align: left;
+  padding: 0 10px;
+}
+#Content11_0 .title-wrapper > .k6lxnkyb05e-editor_css {
+  font-size: 18px;
+  text-align: left;
+  padding: 0 30px 0 10px;
+}
+#Content11_0 .title-wrapper > .k6lxrmle9fu-editor_css {
+  font-size: 18px;
+  text-align: left;
+  padding: 0 30px 0 10px;
+}
+#Content11_0 .title-wrapper > .k6ly1aw82ke-editor_css {
+  width: 300px;
+  height: 300px;
+  position: sticky;
+  top: 200px;
+  left: 800px;
+}
+#Content11_0 .title-wrapper > .k6ly6kbgb-editor_css {
+  width: 300px;
+  height: 300px;
+  position: relative;
+  left: 100px;
+}
+#Content11_0 .title-wrapper > .k6lycb5l8ia-editor_css {
+  height: 120px;
+  padding: 50px 0px 0px;
+}
+#Content11_0.k6lxojfwiy-editor_css {
+  height: 1300px;
+  padding: 96px 30px 0px 10px;
+}
+#Feature1_0 .ant-row > .ant-col > .k6lymhkssyk-editor_css {
+  font-size: 16px;
+}
+#Feature1_1 .ant-row > .ant-col > .k6lypevq23b-editor_css {
+  font-size: 16px;
+}
+#Feature1_2 .ant-row > .ant-col > .k6lyqr8k4ri-editor_css {
+  font-size: 16px;
+}

src/Home/less/feature1.less

@@ -0,0 +1,76 @@
+@content1: content1;
+.@{content1}-wrapper {
+  height: 360px;
+  .@{content1} {
+    height: 100%;
+    padding: 0 24px;
+    &-img {
+      height: 100%;
+      transform-origin: top;
+      padding: 0 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span {
+        display: block;
+        width: 250px;
+        img {
+          display: block;
+        }
+      }
+    }
+    &-text {
+      padding: 0 32px;
+      height: 100%;
+      .@{content1}-content,
+      .@{content1}-title {
+        position: relative !important;
+      }
+      .@{content1}-title {
+        font-size: 32px;
+        font-weight: normal;
+        color: #404040;
+        margin-top: 120px;
+      }
+      .content {
+        margin-top: 20px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{content1}-wrapper {
+    height: 600px;
+    .@{content1} {
+      &-img {
+        height: 200px;
+        padding: 0;
+        text-align: center;
+        margin-top: 64px;
+        span {
+          display: inline-block;
+          width: 180px;
+          height: 200px;
+          line-height: 200px;
+          margin: auto;
+        }
+      }
+      &-text {
+        height: auto;
+        margin-bottom: 20px;
+        text-align: center;
+        padding: 0;
+        .@{content1}-content,
+        .@{content1}-title {
+          width: 100%;
+          top: auto;
+        }
+        .@{content1}-title {
+          margin: 32px auto 16px;
+          font-size: 24px;
+        }
+      }
+    }
+  }
+}

src/Home/less/feature2.less

@@ -0,0 +1,76 @@
+@content2: content2;
+.@{content2}-wrapper {
+  height: 360px;
+  .@{content2} {
+    height: 100%;
+    padding: 0 24px;
+    &-img {
+      height: 100%;
+      transform-origin: top;
+      padding: 0 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span {
+        display: block;
+        width: 250px;
+        img {
+          display: block;
+        }
+      }
+    }
+    &-text {
+      padding: 0 32px;
+      height: 100%;
+      .@{content2}-content,
+      .@{content2}-title {
+        position: relative !important;
+      }
+      .@{content2}-title {
+        font-size: 32px;
+        font-weight: normal;
+        color: #404040;
+        margin-top: 120px;
+      }
+      .@{content2}-content {
+        margin-top: 20px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{content2}-wrapper {
+    height: 600px;
+    .@{content2} {
+      &-img {
+        height: 200px;
+        padding: 0;
+        text-align: center;
+        margin-top: 64px;
+        span {
+          display: inline-block;
+          width: 180px;
+          height: 200px;
+          line-height: 200px;
+          margin: auto;
+        }
+      }
+      &-text {
+        height: auto;
+        margin-bottom: 20px;
+        text-align: center;
+        padding: 0;
+        .@{content2}-content,
+        .@{content2}-title {
+          width: 100%;
+          top: auto;
+        }
+        .@{content2}-title {
+          margin: 32px auto 16px;
+          font-size: 24px;
+        }
+      }
+    }
+  }
+}

src/Home/less/feature6.less

@@ -0,0 +1,118 @@
+@feature6: feature6;
+
+.@{feature6} {
+  &-wrapper {
+    min-height: 360px;
+    margin: 0 auto;
+    overflow: hidden;
+
+    &.home-page-wrapper {
+      .home-page {
+        padding: 64px 24px;
+      }
+    }
+  }
+
+  &-title {
+    display: inline-block;
+
+    &-wrapper {
+      text-align: center;
+      margin-bottom: 48px;
+    }
+
+    &-text {
+      display: inline-block;
+      margin: 0 72px;
+      font-size: 24px;
+      color: @text-color;
+      transition: color .45s @ease-in-out;
+      cursor: pointer;
+
+      &.active {
+        color: @primary-color;
+      }
+    }
+
+    &-bar {
+      height: 6px;
+      background: @primary-color;
+      width: 20%;
+      margin: auto;
+      display: block;
+
+      &-wrapper {
+        position: relative;
+        margin-top: 8px;
+        transition: left .45s @ease-in-out;
+      }
+    }
+  }
+
+  &-number,
+  &-text {
+    text-align: center;
+  }
+
+  &-number {
+    font-size: 48px;
+    color: @primary-color;
+    font-weight: 600;
+
+    &-wrapper {
+      text-align: center;
+    }
+  }
+
+  &-text {
+    font-size: 20px;
+  }
+
+  &-unit {
+    font-size: 16px;
+    color: @primary-color;
+  }
+
+  .ant-carousel {
+    .slick-dots-bottom {
+      bottom: -24px;
+    }
+
+    .slick-dots li {
+      button {
+        background: fade(@primary-color, 30);
+      }
+
+      &.slick-active button {
+        background: @primary-color;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{feature6}-wrapper {
+    padding-bottom: 0;
+    min-height: 580px;
+
+    &.home-page-wrapper {
+      .home-page {
+        padding: 56px 24px 64px;
+      }
+    }
+  }
+
+  .@{feature6}-title {
+    &-text {
+      margin: 0 14px;
+    }
+
+    &-bar {
+      width: 40%;
+    }
+  }
+
+  .@{feature6}-number-wrapper {
+    margin-bottom: 16px;
+  }
+}

src/Home/less/feature8.less

@@ -0,0 +1,217 @@
+@feature8: feature8;
+
+.@{feature8} {
+  &-wrapper {
+    min-height: 680px;
+    margin: 0 auto;
+    overflow: hidden;
+    background-color: fade(#fdfdfd, 30);
+    background-image: linear-gradient(360deg, fade(#c1daff, 30) 0%, fade(#fdfdfd, 30) 80%);
+
+    &.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;
+    }
+  }
+
+  &-carousel {
+    width: ~"calc(100% + 72px)";
+    margin-left: -36px;
+  }
+
+  &-carousel-title {
+    font-size: 20px;
+    text-align: center;
+
+    &-block {
+      display: inline-block;
+      color: fade(@text-color, 45);
+      transition: color .45s;
+      padding: 0 40px;
+      position: relative;
+      cursor: pointer;
+
+      &.active {
+        color: @text-color;
+        cursor: auto;
+      }
+
+      &::before {
+        display: block;
+        content: '';
+        width: 1px;
+        height: 70%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        background: #d8d8d8;
+      }
+
+      &:last-child {
+        &::before {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &-block {
+    margin-top: 48px;
+
+    &-wrapper {
+      margin-top: 32px;
+    }
+
+    &-row {
+      padding: 0 36px;
+    }
+
+    &-col {
+      text-align: center;
+      margin: 36px 0;
+      position: relative;
+
+      &:last-child {
+        .@{feature8}-block-arrow {
+          display: none;
+        }
+      }
+    }
+
+    &-child {
+      padding: 36px 24px 24px;
+      border-radius: 6px;
+
+      height: 100%;
+      transition: box-shadow @animate-duration @ease-in-out, background @animate-duration @ease-in-out;
+
+      &:hover {
+        background-color: #f6f9ff;
+        box-shadow: 0 12px 36px fade(#646488, 15);
+
+        .@{feature8}-block-content {
+          opacity: 1;
+        }
+      }
+    }
+
+    &-image {
+      display: inline-block;
+    }
+
+    &-title {
+      font-size: 16px;
+      font-weight: 400;
+      color: @text-color;
+      margin-top: 16px;
+    }
+
+    &-content {
+      opacity: 1;
+      font-size: 14px;
+      line-height: 22px;
+      color: fade(@text-color, 65);
+      margin-top: 36px;
+      text-align: left;
+      transition: opacity @animate-duration @ease-in-out;
+    }
+
+    &-arrow {
+      position: absolute;
+      right: 0;
+      width: 16px;
+      top: 80px;
+    }
+  }
+
+  &-button {
+    text-align: center;
+
+    &-wrapper {
+      margin-top: 16px;
+    }
+
+    .ant-btn {
+      padding: 8px 40px;
+      border-radius: 20px;
+      line-height: 1.5;
+      height: 40px;
+      border: none;
+      color: #fff;
+      background-color: #3c89f6;
+      background-image: linear-gradient(135deg, #82b5ff 0%, #3c89f6 100%);
+      box-shadow: 0 9px 22px fade(#5f9bf1, 35);
+      transition: color .45s @ease-in-out, box-shadow .45s @ease-in-out, transform .45s @ease-in-out;
+      will-change: transform, box-shadow;
+      &:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 14px 26px fade(#5f9bf1, 40);
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{feature8} {
+    &-wrapper {
+      padding-bottom: 0;
+      min-height: 1540px;
+
+      &.home-page-wrapper {
+        .home-page {
+          padding: 56px 24px 64px;
+        }
+      }
+    }
+
+    &-carousel-title {
+      font-size: 16px;
+
+      &-block {
+        padding: 0 8px;
+      }
+    }
+
+    &-block {
+      &-child {
+        width: 80%;
+        margin: auto;
+        background-color: #f6f9ff;
+        box-shadow: 0 12px 36px fade(#646488, 15);
+      }
+
+      &-content {
+        text-align: center;
+      }
+
+      &-arrow {
+        bottom: -40px;
+        top: auto;
+        left: 0;
+        right: 0;
+        margin: auto;
+        transform: rotate(90deg);
+      }
+    }
+  }
+}

src/Home/less/footer0.less

@@ -0,0 +1,28 @@
+.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/nav3.less

@@ -0,0 +1,192 @@
+@header3: header3;
+
+.@{header3} {
+  background: #fff;
+  width: 100%;
+  z-index: 1;
+  box-shadow: 0 4px 6px fade(#000, 5);
+  position: relative;
+  top: 0;
+
+  .home-page {
+    padding: 0 0px;
+  }
+
+  &-logo {
+    display: inline-block;
+    position: relative;
+    width: 50px;
+  
+    line-height: 60px;
+
+    & img {
+      vertical-align: middle;
+      display: inline-block;
+    }
+
+    & a {
+      display: block;
+    }
+  }
+
+  &-menu {
+    float: right;
+    .ant-menu-horizontal {
+      border-bottom: none;
+    }
+    .ant-menu {
+      line-height: 62px;
+      height: 64px;
+      background: transparent;
+
+      a {
+        display: block;
+      }
+    }
+  }
+
+  &-item {
+    &-block {
+      padding: 0 8px;
+
+      >* {
+        display: inline-block;
+      }
+    }
+  }
+
+  &-item,
+  &-item-child,
+  &-menu {
+
+    .ant-menu-sub .ant-menu-item,
+    .ant-menu-inline .ant-menu-item {
+      height: auto;
+      line-height: 1.5;
+    }
+
+    .item {
+      &-sub-item {
+        display: block;
+        padding: 8px 24px;
+      }
+
+      &-image {
+        float: left;
+        margin-right: 16px;
+        margin-top: 4px;
+        position: relative;
+        z-index: 1;
+      }
+
+      &-title {
+        font-size: 14px;
+        color: @text-color;
+        margin-left: 46px;
+      }
+
+      &-content {
+        font-size: 12px;
+        color: fade(@text-color, 75);
+        margin-left: 46px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{header3} {
+    &-logo {
+      z-index: 101;
+    }
+
+    &.home-page-wrapper .home-page {
+      padding: 0 24px;
+    }
+
+    &-menu {
+      height: auto;
+      float: inherit;
+      position: relative;
+      left: -24px;
+      width: ~"calc(100% + 48px)";
+      opacity: 0;
+      transition: opacity .3s @ease-in-out;
+      background: #fff;
+
+      & li {
+        padding: 0 24px;
+
+        &.ant-menu-submenu {
+          padding: 0;
+        }
+      }
+      .item {
+        &-sub-item {
+          padding: 8px 0;
+        }
+      }
+    }
+
+    &-mobile-menu {
+      width: 16px;
+      height: 14px;
+      cursor: pointer;
+      position: absolute;
+      top: 24px;
+      right: 24px;
+      z-index: 100;
+
+      em {
+        display: block;
+        width: 100%;
+        height: 2px;
+        background: @template-nav-bg-color;
+        margin-top: 4px;
+        transition: transform .3s @ease-in-out, opacity .3s @ease-in-out;
+      }
+
+      :first-child {
+        margin-top: 0;
+      }
+    }
+
+    .ant-menu {
+      height: auto;
+      overflow: hidden;
+
+      .ant-menu-item-selected {
+        border: none;
+      }
+    }
+
+    & .open {
+      height: auto;
+
+      .@{header3}-mobile-menu {
+        em {
+          &:nth-child(1) {
+            transform: translateY(6px) rotate(45deg);
+          }
+
+          &:nth-child(2) {
+            opacity: 0;
+          }
+
+          &:nth-child(3) {
+            transform: translateY(-6px) rotate(-45deg);
+          }
+        }
+      }
+
+      >.@{header3}-menu {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+    &-item-block {
+      height: 40px;
+      line-height: 40px;
+    }
+  }
+}

src/Home/less/point.less

@@ -0,0 +1,61 @@
+@import './custom.less';
+@point: point;
+.@{point} {
+  float: left;
+  width: 8px;
+  height: 8px;
+  opacity: .5;
+  cursor: pointer;
+  pointer-events: auto;
+  transition: opacity .3s @ease-out, background .3s @ease-out;
+  margin: 6px auto;
+  background: @primary-color;
+  border-radius: 100%;
+  &.active {
+    opacity: 1;
+    background: @primary-color;
+  }
+  &-wrapper {
+    position: fixed;
+    z-index: 9998;
+    top: 0;
+    right: 16px;
+    width: 10px;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    pointer-events: none;
+  }
+  &-left {
+    left: 16px;
+  }
+  &-rect {
+    border-radius: 0;
+  }
+  &-prismatic {
+    border-radius: 0;
+    transform: rotate(45deg);
+  }
+  &-stroke {
+    border: 2px solid @primary-color;
+    background: transparent;
+  }
+  &-small {
+    width: 6px;
+    &.point {
+      height: 6px;
+    }
+  }
+  &-large {
+    width: 10px;
+    &.point {
+      height: 10px;
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{point}-wrapper {
+    display: none;
+  }
+}

src/Home/less/teams1.less

@@ -3,7 +3,7 @@
   min-height: 446px;
   overflow: hidden;
   .@{teams1} {
-    overflow: hidden;
+    overflow: visible;
     height: 100%;
     padding: 64px 24px;
     > .title-wrapper {

src/Home/main.jsx

@@ -0,0 +1,161 @@
+/* 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 {
+  Nav30DataSource,
+  Banner31DataSource,
+  Feature20DataSource,
+  Feature10DataSource,
+  Content30DataSource,
+  Feature80DataSource,
+  Feature60DataSource,
+  Content50DataSource,
+  Content90DataSource,
+  Footer00DataSource,
+
+
+} from './data.source';
+import './less/antMotionStyle.less';
+
+let isMobile;
+enquireScreen((b) => {
+  isMobile = b;
+});
+
+const { location } = window;
+
+export default class Home extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isMobile,
+      show: !location.port, // 如果不是 dva 2.0 请删除
+    };
+  }
+
+  componentDidMount() {
+    // 适配手机屏幕;
+    enquireScreen((b) => {
+      this.setState({ isMobile: !!b });
+    });
+    // dva 2.0 样式在组件渲染之后动态加载，导致滚动组件不生效；线上不影响；
+    /* 如果不是 dva 2.0 请删除 start */
+    if (location.port) {
+      // 样式 build 时间在 200-300ms 之间;
+      setTimeout(() => {
+        this.setState({
+          show: true,
+        });
+      }, 500);
+    }
+    /* 如果不是 dva 2.0 请删除 end */
+  }
+
+  render() {
+    const children = [
+      <Nav3
+        id="Nav3_0"
+        key="Nav3_0"
+        dataSource={Nav30DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <Banner3
+        id="Banner3_1"
+        key="Banner3_1"
+        dataSource={Banner31DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <Feature2
+        id="Feature2_0"
+        key="Feature2_0"
+        dataSource={Feature20DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <Feature1
+        id="Feature1_0"
+        key="Feature1_0"
+        dataSource={Feature10DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <Content3
+        id="Content3_0"
+        key="Content3_0"
+        dataSource={Content30DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <Feature8
+        id="Feature8_0"
+        key="Feature8_0"
+        dataSource={Feature80DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <Feature6
+        id="Feature6_0"
+        key="Feature6_0"
+        dataSource={Feature60DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <Content5
+        id="Content5_0"
+        key="Content5_0"
+        dataSource={Content50DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <Content9
+        id="Content9_0"
+        key="Content9_0"
+        dataSource={Content90DataSource}
+        isMobile={this.state.isMobile}
+      />,
+
+      <Footer0
+        id="Footer0_0"
+        key="Footer0_0"
+        dataSource={Footer00DataSource}
+        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',
+        ]}
+      />,
+    ];
+    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/LearnMore/Content11.jsx

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,668 @@
+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/documentation.md

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

src/LearnMore/index.jsx

@@ -2,12 +2,25 @@
 /* eslint arrow-parens: 0 */
 import React from 'react';
 import { enquireScreen } from 'enquire-js';
-
+import Nav3 from "../Home/Nav3";
-import Teams1 from './Teams1';
+import Pricing1 from './Pricing1';
-
+import Feature7 from './Feature7';
-import { Teams10DataSource } from './data.source';
+import Content11 from './Content11';
+import Footer0 from '../Home/Footer0';
+import {
+  Pricing10DataSource,
+  Feature70DataSource,
+  Content110DataSource,
+} 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;
@@ -43,11 +56,36 @@ export default class Home extends React.Component {
   }
 
   render() {
+
     const children = [
-      <Teams1
+      <Nav3
-        id="Teams1_0"
+        id="Nav3_0"
-        key="Teams1_0"
+        key="Nav3_0"
-        dataSource={Teams10DataSource}
+        dataSource={Nav30DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <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}
         isMobile={this.state.isMobile}
       />,
     ];

src/LearnMore/less/antMotionStyle.less

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

src/LearnMore/less/common.less

@@ -0,0 +1,24 @@
+
+@import "~antd/lib/style/v2-compatible-reset.less";
+
+body {
+  word-wrap: break-word;
+}
+
+/* .content-wrapper > .tween-one-leaving,
+.queue-anim-leaving {
+  // position: absolute !important;
+  // width: 100%;
+} */
+
+.video {
+  max-width: 800px;
+}
+
+#react-content {
+  min-height: 100%;
+}
+.home-page-wrapper p {
+  padding: 0;
+  margin: 0;
+}

src/LearnMore/less/content.less

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

src/LearnMore/less/content11.less

@@ -0,0 +1,46 @@
+@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/custom.less

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

src/LearnMore/less/edit.less

@@ -0,0 +1,50 @@
+#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

@@ -0,0 +1,81 @@
+@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

@@ -0,0 +1,85 @@
+@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/LearnMore/utils.js

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

src/components/History.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Button } from "antd";
+import { HashRouter, Route, Switch, Link } from "react-router-dom";
+class History extends React.Component {
+    render() {
+        return (
+            <body >
+                <div>
+                    <div class="bg1">
+                        <h2>
+                            协会历史
+                </h2>
+                        <div class="para" label-module="para">浙江大学学生E志者协会的前身是1984年陈强先生创办的电器工程学院电气维修小组。</div>
+                        <div class="para" label-module="para">步入21世纪，为适应新时期学校教育体制的改革和管理模式的创新，在电气工程学院团委的大力支持和推动下，电器维修小组终于在2008年9月正式成为校级学生社团，面向全校吸纳志愿维修的志愿者，在全校范围内搭建以志愿维修为主体的服务平台，做志愿维修的践行者，做安全用电和节约用电的实践者和宣传者，做电力热点问题及电器电脑新尖问题的引领者。</div>
+                        <div class="para" label-module="para">在此后，协会抓紧机遇，在做好本职工作的同时，积极开拓其他公益志愿活动，服务广大师生与社会群众。多年来，协会还在组织架构、运行管理机制、文化建设、对外宣传等方面展开了积极的探索，开展了多项校级精品活动，提高了协会在校园文化中的知名度和影响力。</div>
+                        <div class="para" label-module="para">近五年来，浙江大学学生E志者协会凭借出色的表现，屡次获得“浙江大学校级优秀社团”、“校级十佳社团”、“青年志愿服务优秀集体”等荣誉称号。2015年4月，浙江大学E志者协会荣升为校四星级社团。2016年6月，浙江大学学生E志者协会获评“浙江大学学生示范性社团”，该奖项是浙江大学社团最高荣誉。</div>
+                        <div class="para" label-module="para">浙江大学学生E志者协会是浙江大学位数不多的拥有自己办公室的社团之一，为社团活动提供了良好载体，办公室位于紫金港校区东三教学楼200室，供社团日常值班维修和社团活动使用。</div>
+                    </div>
+
+
+                    <div class="bg2">
+                        <h2>
+                            活动回顾
+                </h2>
+
+
+                        <div class="para" label-module="para"><b>校园维修&amp;社区维修</b></div>
+                        <div class="para" label-module="para">协会日常值班维修，每月一次的学园义务维修和不定期开展的社区义务维修为同学们和社区居民的生活带来了极大的便利。</div>
+                        <div class="para" label-module="para"><b>电脑电器维修知识课堂（社联精品课程）</b></div>
+                        <div class="para" label-module="para">协会每个长学期都会开办电脑电器维修知识精品课程，旨在传授对于电脑电器维修感兴趣的同学相关的知识并交流经验，方便同学们自主解决生活中遇到的简单的电脑电器故障。2015年秋冬学期精品课程荣获浙江大学学生社团精品课程评比一等奖。</div>
+                        <div class="para" label-module="para"><b>浙江大学学生E志者协会30周年庆典暨电气工程学院公益论坛</b></div>
+                        <div class="para" label-module="para">协会向全校师生展示30年来E志者们在公益实践中取得的成果，同时也邀请到了校内大型公益组织的代表们分享他们的公益之路。活动一经举办，即在全校范围内掀起了热心公益实践</div>
+                        <div class="para" label-module="para">的巨大浪潮，激发了广大青年学子的投身公益事业的热情，点亮了大学生心中公益实践的明灯。</div>
+                    </div>
+                    <div class="bg">
+                        <h2>
+                            协会日常
+                    </h2>
+                        <div class="para" label-module="pare">
+                            浙江大学E志者协会，其宗旨为“以服务社会为己任，搭建电器维修爱好者交流平台，做安全用电和节约用电的实践者和宣传者，研究电力电气热点问题，为建设社会主义和谐社会贡献力量。”</div>
+                        <div class="para" label-module="pare">
+                            在过去的三十年里，协会一如既往的做好自己的最本职工作——<b>免费电器维修</b>，服务于广大的师生；并在各方面展开了积极的探索，开展了多项校级精品活动。
+        协会活动主要分为以下三大部分：
+                        <pre>
+
+                            </pre>
+                            <h3 class="titleh3">
+                                一、公益活动
+                        </h3>
+                            <pre>
+
+                            </pre>
+                            <div class="para" ><b>日常值班</b>：协会在日常服务中，为满足校内师生日常维修需求、提高志愿维修质量与效率，特设立了值班制度，每天固定值班时间超过6小时，为同学们提供免费维修电脑电器的服务。在刚刚过去的2014-2015学年，协会在校内共进行电脑清灰247次，维修电脑硬件软件问题共计794次，维修大小电器共计145件，电脑维修成功率达到90.7%，电器维修成功率达到81.3%。</div>
+                            <div class="para">
+                                <b>线上交流：</b>近三年，协会始终坚持通过各类平台发布指导购买笔记本的帖子，为广大新生以及全校师生提供购机基础知识普及以及免费的购机咨询。协会官方微信平台每周推送有关电脑电器及前沿科技的推文，在及时为全校师生解决电脑电器疑惑的过程中承担起普及科学技术知识的任务。
+                            </div>
+                            <div class="para">
+                                <b>社会实践：</b>在80年代，我们就已经开展社区维修服务，也深入少年宫、社区夏令营等场所向青少年讲解相关知识。此外，我们还积极参加诸如长三角高校公益论坛等社会性的公益活动，并积极与在杭其他高校拓展合作关系，曾作为代表受邀奔赴浙江工商大学参加电脑维修交流峰会，并发表重要讲话。
+                       </div>
+                            <pre>
+
+                            </pre>
+                            <h3 class="titleh3">
+                                二、社团活动</h3>
+                            <pre>
+
+                            </pre>
+                            <div class="para">浙江大学学生E志者协会努力追求发展成一家展现大学生风貌，发扬电气特色的优秀公益社团，开展如电路板焊接、全息投影等内容详实、寓教于乐的实践类活动。</div>
+                            <div class="para">协会每年推陈出新，举办了形式内容各异、特点鲜明的精品活动，如“电路的特技”，鼓励同学自行设计新奇的电路并进行自主焊接；“功放传心声”DIY大赛让同学现场焊接可传声的电路并传达自己的心声；“地球一小时”：向全校师生传播正确用电、合理节电小常识；“全息投影DIY烙铁画”：利用自制全息投影技术让同学体验用烙铁作画的乐趣……这一系列形式多样、独具协会特色的精品活动，吸引了一大批同学的参与，获得了同学们的一致好评。</div>
+                            <pre>
+
+                            </pre>
+                            <h3 class="titleh3">三：创新创意</h3>
+                            <pre>
+
+                            </pre>
+                            <div class="para">在日常维修中，我们基于网络、创新方法，通过理论和实践的结合提升自己的能力，如通过自主实践编写命令提示符批处理文件解决一些系统问题、通过沙箱模拟研究校园流行病毒攻击原理并找出源头。同时关注切合当代大学生实际的前沿技术，曾撰写《windows10测评报告》、《office2016评测》、《2016年暑假购机指南》文件，将所学前沿科技知识应用于日常维修实践。</div>
+                            <div class="para">同时每年，协会均会组织中高年级成员组队参加智能车竞赛，与智能车基地保持联系，在技术难题上交换经验。协会还举办废旧电子元件（电器）创意DIY大赛，面向全校同学征集创意，充分发挥动手实践能力，在校内推广电器创意创新的理念。协会还曾受邀参加中国大学生创意节（杭州赛区）活动，荣获“创意装饰奖”。</div>
+                        </div>
+                    </div>
+
+                    <a href='./'>
+                        <Button type="primary" size={"large"}>to home</Button>
+                    </a>
+                </div>
+            </body>
+
+
+
+        )
+    }
+}
+export default History

src/components/LearnMore.js

@@ -0,0 +1,42 @@
+import React from "react";
+class LearnMore extends React.Component {
+    render() {
+        return (
+            <body>
+                <div class="para-title level-2" label-module="para-title">
+                    <h2 class="title-text"><span class="title-prefix">浙江大学学生E志者协会</span>协会规划</h2>
+
+                </div>
+                <div class="para" label-module="para">三十年间，E志者协会作为一个公益组织，着眼实际，立足于电脑电器维修；开拓创新，积极学习应用前沿知识；扎根实践，广泛开展校内外志愿服务活动。</div>
+                <div class="para" label-module="para">三十年间，E志者协会的公益之路渐行渐宽，从校内到校外，从服务师生到服务社会群众，从一个电器维修小组发展到如今如此规模的志愿者团队。</div>
+                <div class="para" label-module="para">三十年间，E志者协会不忘初心，在E志者三十年志愿服务精神的传承中开拓进取，汲取课堂及课外前沿科学技术之精华，以服务社会为己任，传播先进公益文化为己责，致力于创建更为优秀的、能展现浙江大学青年学生风貌的公益服务团体。</div>
+                <div class="para" label-module="para">我们在2015年提出了引领社团发展的E愿计划，核心是提高服务质量、开展合作交流和传播公益理念。在三十年发展的基础上，我们除了打算完善已有服务制度外，还规划着在紧密跟进时代步伐、 结合学校社团建设制度的情况下，推进与其他组织的合作交流，结合新技术大力建设协会网络平台以及专属APP，借助这些通道以及精品课程，完成我们协会从授人以鱼到授人以渔的关键过渡，同时也通过我们的身体力行以及新媒体的影响力传播公益理念，让公益理念的种子在每个人的心里萌发。</div><div class="anchor-list ">
+                    <a name="8" class="lemma-anchor para-title" ></a>
+                    <a name="sub19873141_8" class="lemma-anchor " ></a>
+                    <a name="协会荣誉" class="lemma-anchor " ></a>
+                </div><div class="para-title level-2" label-module="para-title">
+                    <h2 class="title-text"><span class="title-prefix">浙江大学学生E志者协会</span>协会荣誉</h2>
+
+                </div>
+                <div class="para" label-module="para">2009年浙江大学学生E志者协会获“浙江省优秀志愿者服务队伍”荣誉称号</div>
+                <div class="para" label-module="para">2009年浙江大学学生E志者协会获“浙江大学十大优秀志愿者服务集体”荣誉称号</div>
+                <div class="para" label-module="para">2009年浙江大学学生E志者协会成为“浙江大学素质拓展基地候补基地”</div>
+                <div class="para" label-module="para">2009年浙江大学学生E志者协会荣获“2009年度浙江大学优秀青年志愿者服务项目”荣誉称号</div>
+                <div class="para" label-module="para">2010年浙江大学学生E志者协会被评为“2009-2010年度浙江大学校级优秀社团”</div>
+                <div class="para" label-module="para">2010年末浙江大学学生E志者协会由一星级社团跃升为三星级社团</div>
+                <div class="para" label-module="para">2010——2012年连续三年浙江大学学生E志者协会获评“浙江大学学生十佳社团”</div>
+                <div class="para" label-module="para">2014年浙江大学学生E志者协会荣升为浙江大学四星级社团</div>
+                <div class="para" label-module="para">2015年浙江大学学生E志者协会入选浙江大学最美公益服务集体</div>
+                <div class="para" label-module="para">2015年浙江大学学生E志者协会获社团文化节精品活动二等奖</div>
+                <div class="para" label-module="para">2015年浙江大学学生E志者协会获社团精品课程一等奖</div>
+                <div class="para" label-module="para">2015年浙江大学学生E志者协会“小手共大手，点亮求知之光”暑期社会实践入选为校级重点社会实践项目</div>
+                <div class="para" label-module="para">2016年浙江大学学生E志者协会荣获“2015——2016年度浙江大学学生示范性社团”（浙江大学社团最高荣誉），指导老师赵梓衫老师获“浙江大学十佳社团指导老师”，副会长田畅获“浙江大学优秀学生社团干部”</div>
+                <div class="para" label-module="para">2016年浙江大学电路板焊接大赛中协会成员范俊崇、童丹妮同学获低年级组一等奖（第一名），汤继祥、田畅同学获高年级组一等奖（第一名）</div>
+                <div class="para" label-module="para">2016年浙江大学第十一届“中控杯”机器人竞赛机器人竞赛购物挑战赛项目中协会电器部副部长王溯恺获一等奖</div>
+                <div class="para" label-module="para">2016年美国大学生数学建模竞赛（MCM/ICM）中协会成员贺自怡等同学获M奖</div>
+                <div class="para" label-module="para">另每年协会成员都有多人进入竺可桢学院工高班和爱迪生班等荣誉班级就读</div>
+            </body>
+        )
+    }
+}
+export default LearnMore;

src/components/Login.js

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+
+function Login() {
+
+    const [items, setItems] = useState([]);
+    useEffect(() => {
+        const fetchItems = async () => {
+            let fetchItems = [];
+            for (let i = 1; i <= 7; i++) {
+                let result = await axios(
+                    'api/info/' + i,
+                    {
+                        method: 'GET',
+                    }
+                );
+                console.log("2312");
+                fetchItems.push({
+                    id: result.id
+                })
+
+            }
+            setItems(fetchItems);
+        }
+    })
+    return (
+        <p>
+            {
+                items.map((item, i) => {
+                    return (
+                        <div>
+                            <tr id={i}>
+                                <td>
+                                    {item.id}
+                                </td>
+                            </tr>
+                        </div>
+                    );
+                })
+            }
+        </p>
+    )
+}
+export default Login;

src/components/Sheet.js

@@ -0,0 +1,377 @@
+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';
+
+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));
+    }
+    handleSubmit = e => {
+        e.preventDefault();
+        const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll
+        confirmAlert({
+          title: '提交报名表',
+          message:  '您填写的表格已经保存在浏览器中，以后可以修改后覆盖提交。点击 OK 进行提交。',
+          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();
+                      }
+                  }
+              )
+              }
+            },
+            {
+              label: 'No',
+              onClick: () => {}
+            }
+          ]
+        });
+    }
+
+    render() {
+        const formItemLayout = {
+            labelCol: {
+                xs: { span: 24 },
+                sm: { span: 8 },
+            },
+            wrapperCol: {
+                xs: { span: 24 },
+                sm: { span: 12 },
+            },
+        };
+
+        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="学号" >
+                    {getFieldDecorator('id', {
+                    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[345678]\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>
+        )
+    }
+
+}
+
+const Sheet = Form.create({})(NewForm);
+export default Sheet;

src/index.css

@@ -11,225 +11,3 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
-.titleh3 {
-    font-size: 20px;
-  font-weight: 400;
-  margin: 0;
-}
-.para{
-  font-size: 14px;
-    word-wrap: break-word;
-    color: #333;
-  
-    margin-bottom: 15px;
-    margin-left: 10px;
-    text-indent: 2em;
-    line-height: 24px;
-    zoom: 1;
-  width: 1500px;
-}
-.tmp1{
-  font-size: 30px;
-  background-image: -webkit-linear-gradient(left,blue,rgb(235, 168, 14) 20%,rgb(85, 171, 182) 30%, rgb(207, 55, 149) 40%, rgb(18, 224, 97) 50%,rgb(255, 204, 204) 60%,rgb(218, 12, 156) 70%,#66CCCC 80%,rgb(230, 54, 30) 90%,red 100%);
-    -webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
-    -webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
-  
-    -webkit-animation: masked-animation 4s linear infinite;
-
-  
-  word-break: break-all;
-}
-.Button1{
-  
-  text-align: center;
-
-  font-size: 22px
-}
-.Button2{
-  margin: 10px;
-  font-size: 18px
-}
-.Button3{
-  margin: 10px;
-  font-size: 18px
-}
-.basicInfo-item.name {
-  width: 100px;
-  padding: 0 5px 1px 12px;
-  font-weight: 700;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-wrap: normal;
-  color: #999;
-  background-color: gold
-}
-.bg{
-  background-color:  #E8E8FF;
-}
-.bg1{
-  background-color:  #D7FFF0;
-}
-.bg2{
-  
-    background-color: #DDF3FF;
-  
-}
- .basicInfo-item.value {
-  zoom: 1;
-  font-size: 18px;
-  color: rgb(0, 0, 0);
-  width: 500px;
-  float: left;
-  position: relative;
-  word-break: break-all;
-  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
-}
-.background {
-  width: 100%;
-  height: 100vh;	/* 重点一 */
-  margin: auto;
-  background-image: url(./components/background.jpg);
-  background-repeat: no-repeat;
- /* 重点二 */
-  overflow: auto;
-   background-position:50% 50%;
-}
-.header {
-  overflow: hidden;
-  font-family: "黑体";
-  color: black;
-background-color : black;
-text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
--webkit-background-clip : text;
-  padding: 13px 0px 8px 0px;
-
-}
-.header_r_t {
- 
-  color:rgb(0, 0, 0);
- 
-  position: absolute;
-  right: 20px;
-  top:25px;
- 
-  border-radius: 5px;
-  
-  *float: right;
-  font-size: 17px
-}
-.row-one {
-  overflow: hidden;
-}
-.row-one-cont li {
-  position: relative;
-  float: left;
-  list-style: none;
-  width: 260px;
-  margin-right: 16px;
-}
-.row-one-cont .arc-tit {
-  margin: 15px 0;
-  height: 46px;
-font-size: 22px;
-background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,rgb(204, 162, 63) 20%,rgb(85, 171, 182) 30%, rgb(207, 55, 149) 40%, #00FFFF 50%,rgb(255, 204, 204) 60%,rgb(218, 12, 156) 70%,#66CCCC 80%,rgb(230, 54, 30) 90%,rgb(201, 28, 15) 100%);
-    -webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
-    -webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
-  
-    -webkit-animation: masked-animation 4s linear infinite;
-
-  line-height: 23px;
-  word-break: break-all;
-}
-.row-one-cont .are-cont {
-  font-size: 15px;
-  background-color: rgb(248, 250, 250);
-  color: rgb(0, 0, 0);
-  line-height: 28px;
-  padding-right: 15px;
-  padding-left: 15px;
-  word-break: break-all;
-  border : 1px solid ;
-  border-top: none;
-}
-.type1{
-  font-size: 30px;
-}
-.footer .ft-bot {
-  clear: both;
-  *margin-top: 15px;
-}
-.footer p {
-  color: rgb(255, 255, 255);
-}
-.ft-bot {
-  text-align: center;
-  line-height: 20px;
-  border-top: 1px solid #3c6ba5;
-}
-.ft-info {
-  margin: 0px 0 0 80px;
-}
-
-.ft-info span {
-  position: absolute  ;
-  left: 200px;
-  top:630px;
-  white-space: nowrap;
- 
- color: crimson
-}
-.ft-info1 span{
-  position: absolute  ;
-  left: 1200px;
-  top:630px;
-  white-space: nowrap;
- color: blue
-
-}
-.ft-info2 span{
-  position: absolute  ;
-  left: 200px;
-  top:680px;
-  white-space: nowrap;
- color:green
-}
-.ft-info3 span{
-  position: absolute  ;
-  left: 1200px;
-  top:680px;
-  white-space: nowrap;
- color: blueviolet
-}
-.title-prefix {
-  display: none;
-}
-.para-title.level-2 .title-text {
-  float: left;
-  display: block;
-  padding: 0 8px 0 18px;
-  line-height: 24px;
-  font-size: 22px;
-  font-weight: 400;
-  color: #000;
-  background: #fff;
-}
-.para-title.level-2 {
-  display: block;
-  clear: both;
-  zoom: 1;
-  overflow: hidden;
-  font-size: 20px;
-  border-left: 12px solid #4F9CEE;
-  line-height: 24px;
-  font-size: 22px;
-  font-weight: 400;
-  font-family: Microsoft YaHei,SimHei,Verdana;
- position: relative;
-  margin: 35px 0 15px -30px;
-}
-.picture1{
-  float: right;
-  width: 200px ;
-  height: 50px;
-}

src/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import * as serviceWorker from './serviceWorker';
-import Entry from './Entry';
+
-ReactDOM.render(<Entry />, document.getElementById('root'));
+import App from './App';
+ReactDOM.render(<App />, document.getElementById('root'));
 serviceWorker.register();