新建

.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

.eslintignore

@@ -0,0 +1 @@
+node_modules/

.eslintrc.js

@@ -0,0 +1,85 @@
+const eslintrc = {
+  extends: ['eslint-config-airbnb'],
+  env: {
+    browser: true,
+    node: true,
+    jasmine: true,
+    jest: true,
+    es6: true,
+  },
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 6,
+    ecmaFeatures: {
+      jsx: true,
+      experimentalObjectRestSpread: true,
+    },
+  },
+  plugins: [
+    'markdown',
+    'react',
+    'babel',
+  ],
+  rules: {
+    'func-names': 0,
+    'arrow-body-style': 0,
+    'react/sort-comp': 0,
+    'react/prop-types': 0,
+    'react/jsx-first-prop-new-line': 0,
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.md'] }],
+    'import/extensions': 0,
+    'import/no-unresolved': 0,
+    'import/no-extraneous-dependencies': 0,
+    'prefer-destructuring': 0,
+    'no-param-reassign': 0,
+    'no-return-assign': 0,
+    'max-len': 0,
+    'consistent-return': 0,
+    'no-redeclare': 0,
+    'react/require-extension': 0,
+    'jsx-a11y/no-static-element-interactions': 0,
+    'jsx-a11y/anchor-has-content': 0,
+    'jsx-a11y/click-events-have-key-events': 0,
+    'jsx-a11y/no-noninteractive-element-interactions': 0,
+    'jsx-a11y/anchor-is-valid': 0,
+    'react/no-danger': 0,
+    'comma-dangle': ['error', 'always-multiline'],
+    'function-paren-newline': 0,
+    'object-curly-newline': 0,
+    'no-restricted-globals': 0,
+    'jsx-a11y/mouse-events-have-key-events': 0,
+    'react/jsx-no-target-blank': 0,
+    'react/no-find-dom-node': 0,
+    'react/no-unescaped-entities': 0,
+    'react/prefer-stateless-function': 0,
+    'import/no-webpack-loader-syntax': 0,
+    'react/forbid-prop-types': 0,
+    'react/destructuring-assignment': 0,
+    'react/no-access-state-in-setstate': 0,
+    'import/no-cycle': 0,
+    'react/jsx-props-no-spreading': 0,
+    'react/state-in-constructor': 0,
+    'react/static-property-placement': 0
+  },
+};
+
+if (process.env.RUN_ENV === 'DEMO') {
+  eslintrc.globals = {
+    React: true,
+    ReactDOM: true,
+    mountNode: true,
+  };
+
+  Object.assign(eslintrc.rules, {
+    indent: 0,
+    'no-console': 0,
+    'no-plusplus': 0,
+    'eol-last': 0,
+    'prefer-rest-params': 0,
+    'react/no-multi-comp': 0,
+    'jsx-a11y/href-no-hash': 0,
+    'import/newline-after-import': 0,
+  });
+}
+
+module.exports = eslintrc;

.gitignore

@@ -0,0 +1,14 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# production
+/dist
+
+# misc
+.DS_Store
+npm-debug.log*
+
+# umi
+.umi

.stylelintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "rules": {
+    "declaration-empty-line-before": null,
+    "no-descending-specificity": null,
+    "selector-pseudo-class-no-unknown": null,
+    "selector-pseudo-element-colon-notation": null,
+    "no-empty-source": null
+  }
+}

.umirc.js

@@ -0,0 +1,18 @@
+
+export default {
+  exportStatic: {
+    // htmlSuffix: true,
+    dynamicRoot: true,
+  },
+  targets: {
+    ie: 11,
+  },
+  links: [ { rel: 'icon', href: 'http://questnet.cn/image/logo2.png' }, ],
+  title:'趣程官网',
+  routes: [
+    { path: '/', component: '@/pages/Home/index' },
+    { path: '/about', component: '@/pages/About/index' },
+    { path: '/introduce', component: '@/pages/Introduce/index' },
+    { path: '/contact', component: '@/pages/ContactUs/index' }
+  ]
+}

package.json

@@ -0,0 +1,49 @@
+{
+  "name": "landing-test",
+  "private": true,
+  "scripts": {
+    "start": "umi dev",
+    "build": "umi build",
+    "lint": "eslint --ext .jsx src && npm run lint:style",
+    "lint:style": "stylelint \"src/Home/**/*.less\" --syntax less",
+    "gh-pages": "gh-pages -d dist"
+  },
+  "dependencies": {
+    "@uiw/react-baidu-map": "^1.18.15",
+    "enquire-js": "^0.2.1",
+    "rc-banner-anim": "^2.1.0",
+    "rc-queue-anim": "^1.6.7",
+    "rc-scroll-anim": "^2.5.6",
+    "rc-texty": "^0.2.0",
+    "rc-tween-one": "^2.2.14",
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0",
+    "react-sublime-video": "^0.2.5",
+    "styled-components": "^5.3.0"
+  },
+  "devDependencies": {
+    "@umijs/preset-react": "^1.4.5",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^6.0.0",
+    "eslint-config-airbnb": "^18.0.0",
+    "eslint-loader": "^3.0.2",
+    "eslint-plugin-babel": "^5.1.0",
+    "eslint-plugin-compat": "^3.1.1",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-markdown": "^1.0.0-beta.6",
+    "eslint-plugin-react": "^7.11.1",
+    "eslint-tinker": "^0.5.0",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "gh-pages": "^2.0.1",
+    "husky": "^1.3.1",
+    "pre-commit": "1.x",
+    "stylelint": "^9.4.0",
+    "stylelint-config-prettier": "^4.0.0",
+    "stylelint-config-standard": "^18.0.0",
+    "umi": "^3.0.0"
+  },
+  "pre-commit": [
+    "lint"
+  ]
+}

src/components/Map/index.jsx

@@ -0,0 +1,87 @@
+import React from "react"
+import style from './index.less'
+import { Map, APILoader, InfoWindow, Marker, NavigationControl } from '@uiw/react-baidu-map';
+
+
+function MyMap(props) {
+    let { isMobile } = props
+
+    const [visiable, setVisiable] = React.useState(true);
+    const [isOpen, setIsOpen] = React.useState(true);
+
+    function markerRef(props) {
+        if (props && props.marker) {
+            console.log('marker::', props.marker, props.map, props.BMap);
+        }
+    }
+    function infoWindowRef(props) {
+        if (props && props.infoWindow) {
+            console.log('infoWindow:', props.infoWindow, props.map, props.BMap);
+        }
+    }
+    function clickHandle({ type, target }) {
+        setIsOpen(!isOpen)
+        setVisiable(!visiable)
+    }
+    return <div className={style.myMap}>
+        <div className={style.content}>
+            {isMobile ? <div className={style.mobile}>
+                <div className={style.title}><div></div>联系地址</div>
+                <div className={style.line}></div>
+                <div className={style.editor}>浙江省杭州市余杭区五常街道联创街188号，贝达梦工场E座2层</div>
+                <div className={style.title}><div></div>联系电话</div>
+                <div className={style.line}></div>
+                <div className={`${style.phone} ${style.editor}`}>17348538372</div>
+                <div className={style.title}><div></div>邮箱</div>
+                <div className={style.line}></div>
+                <div className={`${style.phone} ${style.editor}`}>wl9511@dingtalk.com</div>
+            </div> : <div className={style.noMobile}>
+                <div className={style.noTitle}>
+                    <div>
+                        <div className={style.name}>联系我们</div>
+                        <div className={style.a}>联系地址</div>
+                        <div className={style.b}>浙江省杭州市余杭区五常街道联创街188号，贝达梦工场E座2层</div>
+                        <div className={style.a}>联系电话</div>
+                        <div className={style.b}>17348538372</div>
+                        <div className={style.a}>联系邮箱</div>
+                        <div className={style.b}>wl9511@dingtalk.com</div>
+                    </div>
+                </div>
+                <div style={{ width: '820px', height: '500px' }} className={style.noMap}>
+                    <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
+                        <Map
+                            center={'浙江省杭州市余杭区五常街道联创街188号'}
+                            zoom={16}
+                            ref={(props) => {
+                                if (props && props.map) {
+                                    // 启用滚轮放大缩小，默认禁用
+                                    props.map.enableScrollWheelZoom();
+                                }
+                            }}>
+                            <Marker ref={markerRef} position={{ lng: 120.030511, lat: 30.295114 }} onClick={clickHandle} />
+                            <InfoWindow
+                                ref={infoWindowRef}
+                                visiable={visiable}
+                                isOpen={isOpen}
+                                width={200}
+                                onClose={() => { setIsOpen(!isOpen); setVisiable(!visiable) }}
+                                enableCloseOnClick={false}
+                                position={{ lng: 120.030511, lat: 30.295114 }}
+                                content='<div style="font-size: 12px">浙江省杭州市余杭区五常街道联创街188号，贝达梦工场E座2层</div>'
+                                title='<div style="font-size: 16px;margin-bottom: 10px">杭州趣程网络科技有限公司</div>'
+                                offset={{ width: 0, height: -25 }}
+                            />
+                            {/* <NavigationControl
+                                type='BMAP_NAVIGATION_CONTROL_LARGE'
+                                anchor="BMAP_ANCHOR_BOTTOM_LEFT"
+                                enableGeolocation 
+                                showZoomInfo /> */}
+                        </Map>
+                    </APILoader>
+                </div>
+            </div>}
+        </div>
+    </div>
+}
+
+export default React.memo(MyMap)

src/components/Map/index.less

@@ -0,0 +1,89 @@
+.myMap{
+    min-height: 480px;
+    .content{
+        max-width: 1200px;
+        margin: auto;
+        will-change: transform;
+        padding: 50px 0;
+        box-sizing: border-box;
+        .noMobile{
+            // position: absolute;
+            display: flex;
+            justify-content: space-between;
+            .noTitle{
+                position: relative;
+                z-index: 1000;
+                &>div{
+                    position: absolute;
+                    height: 382px;
+                    width: 434px;
+                    background-color: #fff;
+                    border-radius: 2px;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    box-shadow: rgb(201, 201, 201) 0px 0px 10px;
+                    padding: 30px 0 30px 30px;
+                    box-sizing: border-box;
+                    .name{
+                        font-size: 34px;
+                        color: rgb(53, 53, 53);
+                        font-weight: bold;
+                        margin-bottom: 30px;
+                    }
+                    .a{
+                        font-size: 14px;
+                        color: rgb(80, 80, 80);
+                        line-height: 36px;
+                    }
+                    .b{
+                        font-size: 14px;
+                        color: rgb(153, 153, 153);
+                        line-height: 36px;
+                    }
+                }
+            }
+            .noMap{
+            
+            }
+        }
+        
+    }
+
+    .title{
+        font-size: 24px;
+        font-weight: bolder;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        padding: 20px;
+        box-sizing: border-box;
+        &>div{
+            margin-right: 10px;
+            background-color: rgba(6,193,174,1);
+            width: 4px;
+            border-radius: 1px;
+            height: 20px;
+        }
+    }
+    .line{
+        width: 100%;
+        height: 1px;
+        background-color: rgba(0,0,0,.08);
+    }
+    .editor{
+        padding: 28px;
+        box-sizing: border-box;
+        word-wrap: break-word;
+        word-break: break-all;
+        clear: both;
+        overflow: hidden;
+        font-size: 18px;
+        color: #666;
+        font-family: "微软雅黑";
+        word-break: normal;
+    }
+    .phone{
+        // font-family: fantasy;
+    }
+}
+

src/components/Partners/index.jsx

@@ -0,0 +1,24 @@
+
+import style from './index.less'
+import Scroll from '../Scroll'
+
+function Partners(props) {
+    console.log(props);
+    let {isMobile} = props
+    return <div className={style.partners}>
+        <div className={style.content}>
+            <div className={style.title}>合作伙伴</div>
+            {/* <Scroll duration={10}> */}
+                <div className={style.imgs} style={isMobile ? {width: '100%', padding: '0 20px', boxSizing: 'border-box', overflowY: 'auto'} : {}}>
+                    <img src={require('../../image/wy.png')} className={style.img}/>
+                    <img src={require('../../image/txgg.png')} className={style.img}/>
+                    <img src={require('../../image/yw.png')} className={style.img}/>
+                    <img src={require('../../image/zjtd.png')} className={style.img}/>
+                    <img src={require('../../image/zzy.png')} className={style.img}/>
+                </div>
+            {/* </Scroll> */}
+        </div>
+    </div>
+}
+
+export default React.memo(Partners)

src/components/Partners/index.less

@@ -0,0 +1,31 @@
+.partners{
+    background: url(../../image/AD0I98nwCRAEGAAggYvl7QUotp_hrgcwgA84hAM.png) repeat top ,transparent;
+    height: 280px;
+    background-size: cover;
+    .content{
+        max-width: 1000px;
+        position: relative;
+        margin: auto;
+        will-change: transform;
+        padding: 30px 0;
+        box-sizing: border-box;
+        .title{
+            font-size: 32px;
+            font-weight: normal;
+            color: #000;
+            text-align: center;
+            margin-bottom: 40px;
+        }
+    }
+}
+
+.imgs{
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+    .img{
+        width: 170px;
+        height: 86px;
+        margin: 0 10px;
+    }
+}

src/components/Scroll/index.less

@@ -0,0 +1,18 @@
+.marquee_box {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    word-break: keep-all;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+}
+  
+.marquee_box div {
+    display: inline-block;
+}
+  
+.marquee_box:hover div {
+    animation-play-state: paused;
+    cursor: default;
+}

src/components/Scroll/index.tsx

@@ -0,0 +1,68 @@
+import React, { useRef, useEffect, useState } from 'react'
+import './index.less'
+import styled from 'styled-components'
+
+interface TextScrollProps {
+	/**
+	 * 持续时间/s
+	 */
+	duration: number,
+	children: React.ReactElement,
+}
+
+function TextScroll(props: TextScrollProps) {
+	const { duration, children } = props
+
+	const defaultState = {
+		contentWidth: 0,
+		right: 0,
+		duration,
+	}
+
+	const [state, setState] = useState(defaultState)
+
+	let ref = useRef<HTMLParagraphElement>(null)
+
+	useEffect(() => {
+		const { offsetWidth, parentElement } = ref.current as HTMLParagraphElement
+		setState({
+			...state,
+			contentWidth: offsetWidth,
+			right: parentElement!.offsetWidth,
+		})
+	}, [])
+
+	const { contentWidth, right, duration: timing } = state
+
+	const animationName = `marquee_${contentWidth}`
+	console.log(11111, right, contentWidth);
+
+	const Text = styled.div`
+		position: relative;
+		left: ${right}px;
+		animation: ${animationName} ${timing}s linear infinite both;
+		animation-play-state: running;
+		animation-fill-mode: forwards;
+
+		@keyframes ${animationName} {
+		0% {
+			transform: translateX(0px);
+		}
+		100% {
+			transform: translateX(${contentWidth - right}px);
+		}
+		}
+	`
+
+	return (
+		<div className="marquee_box">
+			<Text ref={ref}>{children}</Text>
+		</div>
+	)
+}
+TextScroll.defaultProps = {
+	content: '',
+	duration: 3,
+}
+
+export default React.memo(TextScroll)

src/pages/About/Content13.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import QueueAnim from 'rc-queue-anim';
+import { getChildrenToRender } from './utils';
+
+class Content13 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>
+      </OverPack>
+    );
+  }
+}
+
+export default Content13;

src/pages/About/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/pages/About/Feature3.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import QueueAnim from 'rc-queue-anim';
+import TweenOne from 'rc-tween-one';
+import { Row, Col } from 'antd';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import { getChildrenToRender } from './utils';
+
+class 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/pages/About/Footer1.jsx

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

src/pages/About/Nav0.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import TweenOne from 'rc-tween-one';
+import { Menu } from 'antd';
+import { getChildrenToRender } from './utils';
+
+const { Item, SubMenu } = Menu;
+
+class Header 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={`header0-item-block ${a.className}`.trim()}
+              >
+                {a.children.map(getChildrenToRender)}
+              </div>
+            }
+            popupClassName="header0-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={`header0-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
+                ? {
+                    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="dark"
+            >
+              {navChildren}
+            </Menu>
+          </TweenOne>
+        </div>
+      </TweenOne>
+    );
+  }
+}
+
+export default Header;

src/pages/About/Teams0.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import BannerAnim, { Element } from 'rc-banner-anim';
+import TweenOne from 'rc-tween-one';
+import QueueAnim from 'rc-queue-anim';
+import { getChildrenToRender } from './utils';
+import 'rc-banner-anim/assets/index.css';
+
+class Teams extends React.PureComponent {
+  getChildrenToRender = (children) => {
+    return children.map((item, i) => {
+      const { titleWrapper, ...elementPros } = item;
+      return (
+        <Element
+          {...elementPros}
+          key={i.toString()}
+          prefixCls={elementPros.className}
+        >
+          <QueueAnim
+            type={['bottom', 'top']}
+            delay={200}
+            key="text"
+            {...titleWrapper}
+          >
+            {titleWrapper.children.map(getChildrenToRender)}
+          </QueueAnim>
+        </Element>
+      );
+    });
+  };
+
+  render() {
+    const { ...tagProps } = this.props;
+    const { dataSource, isMobile } = tagProps;
+    delete tagProps.dataSource;
+    delete tagProps.isMobile;
+    return (
+      <div {...tagProps} {...dataSource.wrapper}>
+        <OverPack {...dataSource.OverPack}>
+          <TweenOne
+            key="wrapper"
+            animation={
+              isMobile
+                ? {
+                    scaleY: '+=0.3',
+                    opacity: 0,
+                    type: 'from',
+                    ease: 'easeOutQuad',
+                  }
+                : {
+                    y: '+=30',
+                    opacity: 0,
+                    type: 'from',
+                    ease: 'easeOutQuad',
+                  }
+            }
+            resetStyle
+            component=""
+          >
+            <BannerAnim
+              type="across"
+              arrow={false}
+              dragPlay={!!isMobile}
+              {...dataSource.BannerAnim}
+            >
+              {this.getChildrenToRender(dataSource.BannerAnim.children)}
+            </BannerAnim>
+          </TweenOne>
+        </OverPack>
+      </div>
+    );
+  }
+}
+
+export default Teams;

src/pages/About/Teams4.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import TweenOne from 'rc-tween-one';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import { Row, Col } from 'antd';
+import QueueAnim from 'rc-queue-anim';
+import { getChildrenToRender } from './utils';
+
+class Content8 extends React.PureComponent {
+  getDelay = (e, b) => (e % b) * 100 + Math.floor(e / b) * 100 + b * 100;
+
+  getBlockChildren = (item, i) => {
+    const children = item.children;
+    const delay = this.props.isMobile ? i * 50 : this.getDelay(i, 24 / item.md);
+    const liAnim = {
+      y: 30,
+      opacity: 0,
+      type: 'from',
+      ease: 'easeOutQuad',
+      delay,
+    };
+    return (
+      <TweenOne component={Col} animation={liAnim} key={i.toString()} {...item}>
+        <div {...children}>
+          <div className="image-wrapper" {...children.img}>
+            <img src={children.img.children} alt="img" />
+          </div>
+          <h2 {...children.title}>{children.title.children}</h2>
+          <div {...children.content}>{children.content.children}</div>
+        </div>
+      </TweenOne>
+    );
+  };
+
+  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>
+          <OverPack {...dataSource.OverPack}>
+            <QueueAnim type="bottom" key="img">
+              <Row {...dataSource.block} key="img">
+                {children}
+              </Row>
+            </QueueAnim>
+          </OverPack>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Content8;

src/pages/About/data.source.js

@@ -0,0 +1,1169 @@
+import React from 'react';
+export const Nav00DataSource = {
+  wrapper: { className: 'header0 home-page-wrapper kpxe5cib8w-editor_css' },
+  page: { className: 'home-page kpw8lxhxqno-editor_css' },
+  logo: {
+    className: 'header0-logo',
+    children: 'http://questnet.cn/image/logo.png',
+  },
+  Menu: {
+    className: 'header0-menu',
+    children: [
+      {
+        name: 'item0',
+        className: 'header0-item',
+        children: {
+          href: '/',
+          children: [
+            {
+              children: (
+                <span>
+                  <span>
+                    <p>首页</p>
+                  </span>
+                </span>
+              ),
+              name: 'text',
+              className: 'kps4bw7y17d-editor_css',
+            },
+          ],
+        },
+        subItem: null,
+      },
+      {
+        name: 'item1',
+        className: 'header0-item ant-menu-item-selected',
+        children: {
+          href: 'javascript:void(0)',
+          children: [
+            {
+              children: (
+                <span>
+                  <p>关于我们</p>
+                </span>
+              ),
+              name: 'text',
+              className: 'kps1yo37x8c-editor_css',
+            },
+          ],
+          className: 'kps4dj1m9yt-editor_css',
+        },
+      },
+      {
+        name: 'item2',
+        className: 'header0-item',
+        children: {
+          href: '/introduce',
+          children: [
+            {
+              children: (
+                <span>
+                  <span>
+                    <p>业务介绍</p>
+                  </span>
+                </span>
+              ),
+              name: 'text',
+            },
+          ],
+        },
+      },
+      {
+        name: 'item3',
+        className: 'header0-item',
+        children: {
+          href: '/contact',
+          children: [
+            {
+              children: (
+                <span>
+                  <span>
+                    <span>
+                      <p>联系我们</p>
+                    </span>
+                  </span>
+                </span>
+              ),
+              name: 'text',
+            },
+          ],
+        },
+      },
+    ],
+  },
+  mobileMenu: { className: 'header0-mobile-menu' },
+};
+export const Content130DataSource = {
+  OverPack: {
+    className: 'home-page-wrapper content13-wrapper kps4irbrinf-editor_css',
+    playScale: 0.3,
+    always: false,
+    appear: false,
+  },
+  titleWrapper: {
+    className: 'title-wrapper',
+    children: [
+      {
+        name: 'title~kps4kb82urf',
+        className: 'kpxe4ue36gk-editor_css',
+        children: (
+          <span>
+            <p>关于我们</p>
+          </span>
+        ),
+      },
+    ],
+  },
+};
+export const Teams00DataSource = {
+  wrapper: { className: 'home-page-wrapper teams0-wrapper' },
+  OverPack: {
+    playScale: 0.3,
+    className: 'home-page teams0 kpxn9f9gel-editor_css',
+  },
+  BannerAnim: {
+    className: 'banner-anim',
+    children: [
+      {
+        name: 'elem0',
+        className: 'teams0-banner-user-elem',
+        titleWrapper: {
+          className: 'teams0-content-wrapper',
+          children: [
+            {
+              name: 'title',
+              children: (
+                <span>
+                  <span>
+                    <p>公司简介</p>
+                  </span>
+                </span>
+              ),
+              className: 'teams0-h1 kps4mt2wxs-editor_css',
+            },
+            {
+              name: 'content',
+              children: (
+                <span>
+                  <span>
+                    <span>
+                      <span>
+                        <p>
+                          公司始于创始人从2010年大一开始在校创业，大学四年就已成功积累千万粉丝。
+                        </p>
+                        <p>
+                          2015年正式成立杭州趣程网络科技有限公司，抓住了移动互联网的发展机遇，通过自研智能数字营销服务平台及产品体系构建，深耕互联网流量获取与运营，经过长达十年的发展探索，成为国内领先的综合性数字营销服务提供商之一。
+                        </p>
+                      </span>
+                    </span>
+                  </span>
+                </span>
+              ),
+              className: 'teams0-content kps4n1g5e6o-editor_css',
+            },
+            {
+              name: 'content2',
+              children: (
+                <span>
+                  <span>
+                    <p>
+                      目前布局新电商，新媒体，知识付费，网络文学，微信小程序，广告营销，等移动互联网领域发展。与腾讯、阅文、网易等各大互联网公司建立用户的连接与变现合作，探索与其他行业的赋能与合作。
+                    </p>
+                  </span>
+                </span>
+              ),
+              className: 'teams0-content kps4i5e9roo-editor_css',
+            },
+          ],
+        },
+      },
+    ],
+  },
+};
+export const Content90DataSource = {
+  wrapper: {
+    className: 'home-page-wrapper content9-wrapper kpxmuoey8et-editor_css',
+  },
+  page: { className: 'home-page content9 kpxmuv2bh2-editor_css' },
+  titleWrapper: {
+    className: 'title-wrapper',
+    children: [
+      {
+        name: 'image',
+        children:
+          'https://gw.alipayobjects.com/zos/rmsportal/PiqyziYmvbgAudYfhuBr.svg',
+        className: 'title-image',
+      },
+      {
+        name: 'title',
+        children: (
+          <span>
+            <span>
+              <p>发展历程</p>
+            </span>
+          </span>
+        ),
+        className: 'title-h1 kpxmutszulq-editor_css',
+      },
+    ],
+  },
+  block: {
+    className: 'timeline',
+    children: [
+      {
+        name: 'block0',
+        className: 'block-wrapper',
+        playScale: 0.3,
+        children: {
+          imgWrapper: { className: 'image-wrapper' },
+          textWrapper: { className: 'text-wrapper' },
+          img: {
+            className: 'block-img',
+            children:
+              'https://gw.alipayobjects.com/zos/rmsportal/SlFgHDtOTLzccvFrQHLg.png',
+          },
+          icon: {
+            className: 'block-icon',
+            children:
+              'https://gw.alipayobjects.com/zos/rmsportal/qJnGrvjXPxdKETlVSrbe.svg',
+          },
+          name: { className: 'block-name kpxn09pmsrm-editor_css', children: '2010年' },
+          post: { className: 'block-post', children: '' },
+          time: {
+            className: 'block-time kpxn045lsv-editor_css',
+            children: (
+              <span>
+                <span>
+                  <p>诞生</p>
+                </span>
+              </span>
+            ),
+          },
+          title: {
+            className: 'block-title kpxn0dz2kep-editor_css',
+            children: (
+              <span>
+                <span>
+                  <span>
+                    <span>
+                      <span>
+                        <span>
+                          <span>
+                            <span>
+                              <span>
+                                <p>
+                                在校开始微博 人人网等社交媒体的运营发展<br />
+                                </p>
+                              </span>
+                            </span>
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                </span>
+              </span>
+            ),
+          },
+          content: { className: 'block-content', children: '' },
+        },
+      },
+      {
+        name: 'block1',
+        className: 'block-wrapper',
+        playScale: 0.3,
+        children: {
+          imgWrapper: { className: 'image-wrapper' },
+          textWrapper: { className: 'text-wrapper' },
+          img: {
+            className: 'block-img',
+            children:
+              'https://gw.alipayobjects.com/zos/rmsportal/SlFgHDtOTLzccvFrQHLg.png',
+          },
+          icon: {
+            className: 'block-icon',
+            children:
+              'https://gw.alipayobjects.com/zos/rmsportal/QviGtUPvTFxdhsTUAacr.svg',
+          },
+          name: { className: 'block-name kpxn09pmsrm-editor_css', children: '2015年' },
+          post: { className: 'block-post', children: '' },
+          time: {
+            className: 'block-time kpxn045lsv-editor_css',
+            children: (
+              <span>
+                <span>
+                  <p>成长</p>
+                </span>
+              </span>
+            ),
+          },
+          title: {
+            className: 'block-title kpxn0dz2kep-editor_css',
+            children: (
+              <span>
+                <span>
+                  <span>
+                    <span>
+                      <span>
+                        <span>
+                          <span>
+                            <span>
+                              <span>
+                                <p>
+                                成立杭州趣程网络科技有限公司<br />
+                                </p>
+                              </span>
+                            </span>
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                </span>
+              </span>
+            ),
+          },
+          content: { className: 'block-content', children: '' },
+        },
+      },
+      {
+        name: 'block2',
+        className: 'block-wrapper',
+        playScale: 0.3,
+        children: {
+          imgWrapper: { className: 'image-wrapper' },
+          textWrapper: { className: 'text-wrapper' },
+          img: {
+            className: 'block-img',
+            children:
+              'https://gw.alipayobjects.com/zos/rmsportal/SlFgHDtOTLzccvFrQHLg.png',
+          },
+          icon: {
+            className: 'block-icon',
+            children:
+              'https://gw.alipayobjects.com/zos/rmsportal/QviGtUPvTFxdhsTUAacr.svg',
+          },
+          name: { className: 'block-name kpxn09pmsrm-editor_css', children: '2016年' },
+          post: { className: 'block-post', children: '' },
+          time: {
+            className: 'block-time kpxn045lsv-editor_css',
+            children: (
+              <span>
+                <span>
+                  <p></p>
+                </span>
+              </span>
+            ),
+          },
+          title: {
+            className: 'block-title kpxn0dz2kep-editor_css',
+            children: (
+              <span>
+                <span>
+                  <span>
+                    <span>
+                      <span>
+                        <span>
+                          <span>
+                            <span>
+                              <span>
+                                <p>
+                                打造新媒体粉丝矩阵，成功积累数千万用户， 并布局电商<br />
+                                </p>
+                              </span>
+                            </span>
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                </span>
+              </span>
+            ),
+          },
+          content: { className: 'block-content', children: '' },
+        },
+      },
+      {
+        name: 'block3',
+        className: 'block-wrapper',
+        playScale: 0.3,
+        children: {
+          imgWrapper: { className: 'image-wrapper' },
+          textWrapper: { className: 'text-wrapper' },
+          img: {
+            className: 'block-img',
+            children:
+              'https://gw.alipayobjects.com/zos/rmsportal/SlFgHDtOTLzccvFrQHLg.png',
+          },
+          icon: {
+            className: 'block-icon',
+            children:
+              'https://gw.alipayobjects.com/zos/rmsportal/QviGtUPvTFxdhsTUAacr.svg',
+          },
+          name: { className: 'block-name kpxn09pmsrm-editor_css', children: '2018年' },
+          post: { className: 'block-post', children: '' },
+          time: {
+            className: 'block-time kpxn045lsv-editor_css',
+            children: (
+              <span>
+                <span>
+                  <p>高速发展</p>
+                </span>
+              </span>
+            ),
+          },
+          title: {
+            className: 'block-title kpxn0dz2kep-editor_css',
+            children: (
+              <span>
+                <span>
+                  <span>
+                    <span>
+                      <span>
+                        <span>
+                          <span>
+                            <span>
+                              <span>
+                                <p>
+                                开展网络文学广告投放业务，月消耗千万级<br />
+                                </p>
+                              </span>
+                            </span>
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                </span>
+              </span>
+            ),
+          },
+          content: { className: 'block-content', children: '' },
+        },
+      },
+      {
+        name: 'block4',
+        className: 'block-wrapper',
+        playScale: 0.3,
+        children: {
+          imgWrapper: { className: 'image-wrapper' },
+          textWrapper: { className: 'text-wrapper' },
+          img: {
+            className: 'block-img',
+            children:
+              'https://gw.alipayobjects.com/zos/rmsportal/SlFgHDtOTLzccvFrQHLg.png',
+          },
+          icon: {
+            className: 'block-icon',
+            children:
+              'https://gw.alipayobjects.com/zos/rmsportal/QviGtUPvTFxdhsTUAacr.svg',
+          },
+          name: { className: 'block-name kpxn09pmsrm-editor_css', children: '2019年' },
+          post: { className: 'block-post', children: '' },
+          time: {
+            className: 'block-time kpxn045lsv-editor_css',
+            children: (
+              <span>
+                <span>
+                  <p>势如破竹</p>
+                </span>
+              </span>
+            ),
+          },
+          title: {
+            className: 'block-title kpxn0dz2kep-editor_css',
+            children: (
+              <span>
+                <span>
+                  <span>
+                    <span>
+                      <span>
+                        <span>
+                          <span>
+                            <span>
+                              <span>
+                                <p>
+                                行业领先  腾讯广告SMB自媒体行业2019YTD小说行业消耗王者<br />
+                                </p>
+                              </span>
+                            </span>
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                </span>
+              </span>
+            ),
+          },
+          content: { className: 'block-content', children: '' },
+        },
+      },
+      {
+        name: 'block5',
+        className: 'block-wrapper',
+        playScale: 0.3,
+        children: {
+          imgWrapper: { className: 'image-wrapper' },
+          textWrapper: { className: 'text-wrapper' },
+          img: {
+            className: 'block-img',
+            children:
+              'https://gw.alipayobjects.com/zos/rmsportal/SlFgHDtOTLzccvFrQHLg.png',
+          },
+          icon: {
+            className: 'block-icon',
+            children:
+              'https://gw.alipayobjects.com/zos/rmsportal/QviGtUPvTFxdhsTUAacr.svg',
+          },
+          name: { className: 'block-name kpxn09pmsrm-editor_css', children: '2020年' },
+          post: { className: 'block-post', children: '' },
+          time: {
+            className: 'block-time kpxn045lsv-editor_css',
+            children: (
+              <span>
+                <span>
+                  <p>持续发展</p>
+                </span>
+              </span>
+            ),
+          },
+          title: {
+            className: 'block-title kpxn0dz2kep-editor_css',
+            children: (
+              <span>
+                <span>
+                  <span>
+                    <span>
+                      <span>
+                        <span>
+                          <span>
+                            <span>
+                              <span>
+                                <p>
+                                腾讯广告自媒体小说2020年测书王者 ，年度品牌自媒体ENJOY上海<br />
+                                </p>
+                              </span>
+                            </span>
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                </span>
+              </span>
+            ),
+          },
+          content: { className: 'block-content', children: '' },
+        },
+      },
+      {
+        name: 'block8',
+        className: 'block-wrapper',
+        playScale: 0.3,
+        children: {
+          imgWrapper: { className: 'image-wrapper' },
+          textWrapper: { className: 'text-wrapper' },
+          img: {
+            className: 'block-img',
+            children:
+              'https://gw.alipayobjects.com/zos/rmsportal/SlFgHDtOTLzccvFrQHLg.png',
+          },
+          icon: {
+            className: 'block-icon',
+            children:
+              'https://gw.alipayobjects.com/zos/rmsportal/QviGtUPvTFxdhsTUAacr.svg',
+          },
+          name: { className: 'block-name kpxn09pmsrm-editor_css', children: '2021年' },
+          post: { className: 'block-post', children: '' },
+          time: {
+            className: 'block-time kpxn045lsv-editor_css',
+            children: (
+              <span>
+                <span>
+                  <p>乘风破浪</p>
+                </span>
+              </span>
+            ),
+          },
+          title: {
+            className: 'block-title kpxn0dz2kep-editor_css',
+            children: (
+              <span>
+                <span>
+                  <span>
+                    <span>
+                      <span>
+                        <span>
+                          <span>
+                            <span>
+                              <span>
+                                <p>
+                                自主研发智能数字营销服务平台，阅文内容cps一级代理商，继续保持行业领先地位<br />
+                                </p>
+                              </span>
+                            </span>
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                </span>
+              </span>
+            ),
+          },
+          content: { className: 'block-content', children: '' },
+        },
+      },
+    ],
+  },
+};
+export const Feature30DataSource = {
+  wrapper: {
+    className: 'home-page-wrapper content3-wrapper kpxn3xvuvri-editor_css',
+  },
+  page: { className: 'home-page content3 kpxn3ipefc-editor_css' },
+  OverPack: { playScale: 0.3 },
+  titleWrapper: {
+    className: 'title-wrapper',
+    children: [
+      {
+        name: 'title',
+        children: (
+          <span>
+            <p>价值观</p>
+          </span>
+        ),
+        className: 'title-h1',
+      },
+      {
+        name: 'content',
+        className: 'title-content',
+        children: (
+          <span>
+            <p>用户第一 追求极致 坦诚开放 团队协作 拥抱变化</p>
+          </span>
+        ),
+      },
+    ],
+  },
+  block: {
+    className: 'content3-block-wrapper kpxg2ehzlw-editor_css',
+    children: [
+      {
+        name: 'block0',
+        className: 'content3-block',
+        md: 8,
+        xs: 24,
+        children: {
+          icon: {
+            className: 'content3-icon',
+            children:
+              'https://zos.alipayobjects.com/rmsportal/ScHBSdwpTkAHZkJ.png',
+          },
+          textWrapper: { className: 'content3-text' },
+          title: {
+            className: 'content3-title',
+            children: (
+              <span>
+                <p>用户第一</p>
+              </span>
+            ),
+          },
+          content: {
+            className: 'content3-content',
+            children: (
+              <span>
+                <p>
+                  一切站在用户角度看问题，用深刻的用户思维，数据思维，理解用户，服务用户。
+                </p>
+              </span>
+            ),
+          },
+        },
+      },
+      {
+        name: 'block1',
+        className: 'content3-block',
+        md: 8,
+        xs: 24,
+        children: {
+          icon: {
+            className: 'content3-icon',
+            children:
+              'https://zos.alipayobjects.com/rmsportal/NKBELAOuuKbofDD.png',
+          },
+          textWrapper: { className: 'content3-text' },
+          title: {
+            className: 'content3-title',
+            children: (
+              <span>
+                <p>追求极致</p>
+              </span>
+            ),
+          },
+          content: {
+            className: 'content3-content',
+            children: (
+              <span>
+                <p>不甘平庸，积极进取，要做就要做到最好，拥有一颗冠军的心。</p>
+              </span>
+            ),
+          },
+        },
+      },
+      {
+        name: 'block2',
+        className: 'content3-block',
+        md: 8,
+        xs: 24,
+        children: {
+          icon: {
+            className: 'content3-icon',
+            children:
+              'https://zos.alipayobjects.com/rmsportal/xMSBjgxBhKfyMWX.png',
+          },
+          textWrapper: { className: 'content3-text' },
+          title: {
+            className: 'content3-title',
+            children: (
+              <span>
+                <p>坦诚开放</p>
+              </span>
+            ),
+          },
+          content: {
+            className: 'content3-content',
+            children: (
+              <span>
+                <span>
+                  <p>坦率 真诚 简单 不拐弯抹角 乐于表达分享 开放沟通交流。</p>
+                </span>
+              </span>
+            ),
+          },
+        },
+      },
+      {
+        name: 'block3',
+        className: 'content3-block',
+        md: 8,
+        xs: 24,
+        children: {
+          icon: {
+            className: 'content3-icon',
+            children:
+              'https://zos.alipayobjects.com/rmsportal/MNdlBNhmDBLuzqp.png',
+          },
+          textWrapper: { className: 'content3-text' },
+          title: {
+            className: 'content3-title',
+            children: (
+              <span>
+                <p>团队协作</p>
+              </span>
+            ),
+          },
+          content: {
+            className: 'content3-content',
+            children: (
+              <span>
+                <span>
+                  <span>
+                    <p>发展团队的力量，高效协作，互帮互助，共同成长。</p>
+                  </span>
+                </span>
+              </span>
+            ),
+          },
+        },
+      },
+      {
+        name: 'block4',
+        className: 'content3-block',
+        md: 8,
+        xs: 24,
+        children: {
+          icon: {
+            className: 'content3-icon',
+            children:
+              'https://zos.alipayobjects.com/rmsportal/UsUmoBRyLvkIQeO.png',
+          },
+          textWrapper: { className: 'content3-text' },
+          title: {
+            className: 'content3-title',
+            children: (
+              <span>
+                <p>拥抱变化</p>
+              </span>
+            ),
+          },
+          content: {
+            className: 'content3-content',
+            children: (
+              <span>
+                <p>脚踏实地，拥抱变化，自我驱动，开拓创新。</p>
+              </span>
+            ),
+          },
+        },
+      },
+    ],
+  },
+};
+export const Teams40DataSource = {
+  wrapper: {
+    className: 'home-page-wrapper content8-wrapper',
+  },
+  page: { className: 'home-page content8' },
+  OverPack: { 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: '所获奖项', className: 'title-h1' },
+    ],
+  },
+  block: {
+    className: 'content-wrapper kpxern2s22d-editor_css',
+    children: [
+      {
+        name: 'block0',
+        md: 6,
+        xs: 24,
+        className: 'content8-block-wrapper',
+        children: {
+          className: 'content8-block',
+          img: {
+            className: 'content8-img',
+            children:
+              'http://questnet.cn/image/trophy/a.png',
+          },
+          title: { className: 'content8-title', children: '' },
+          content: {
+            className: 'content8-content',
+            children: '2017-新浪微博浙江区域',
+          },
+        },
+      },
+      {
+        name: 'block1',
+        md: 6,
+        xs: 24,
+        className: 'content8-block-wrapper',
+        children: {
+          className: 'content8-block',
+          img: {
+            className: 'content8-img',
+            children:
+              'http://questnet.cn/image/trophy/b.png',
+          },
+          title: { className: 'content8-title', children: '' },
+          content: {
+            className: 'content8-content',
+            children: '2018新浪浙江-微博盛典',
+          },
+        },
+      },
+      {
+        name: 'block2',
+        md: 6,
+        xs: 24,
+        className: 'content8-block-wrapper',
+        children: {
+          className: 'content8-block',
+          img: {
+            className: 'content8-img',
+            children:
+              'http://questnet.cn/image/trophy/c.png',
+          },
+          title: { className: 'content8-title', children: '' },
+          content: {
+            className: 'content8-content',
+            children: '2019-年度品牌实效自媒体-enjoy上海',
+          },
+        },
+      },
+      {
+        name: 'block3',
+        md: 6,
+        xs: 24,
+        className: 'content8-block-wrapper',
+        children: {
+          className: 'content8-block',
+          img: {
+            className: 'content8-img',
+            children:
+              'http://questnet.cn/image/trophy/d.png',
+          },
+          title: { className: 'content8-title', children: '' },
+          content: {
+            className: 'content8-content',
+            children: '2019-年度品质实效自媒体-enjoy杭州',
+          },
+        },
+      },
+      {
+        name: 'block4',
+        md: 6,
+        xs: 24,
+        className: 'content8-block-wrapper',
+        children: {
+          className: 'content8-block',
+          img: {
+            className: 'content8-img',
+            children:
+              'http://questnet.cn/image/trophy/e.png',
+          },
+          title: { className: 'content8-title', children: '' },
+          content: {
+            className: 'content8-content',
+            children: '2019-年度新锐实效自媒体-enjoy北京',
+          },
+        },
+      },
+      {
+        name: 'block5',
+        md: 6,
+        xs: 24,
+        className: 'content8-block-wrapper',
+        children: {
+          className: 'content8-block',
+          img: {
+            className: 'content8-img',
+            children:
+              'http://questnet.cn/image/trophy/f.png',
+          },
+          title: { className: 'content8-title', children: '' },
+          content: {
+            className: 'content8-content',
+            children: '2019-腾讯广告',
+          },
+        },
+      },
+      {
+        name: 'block6',
+        md: 6,
+        xs: 24,
+        className: 'content8-block-wrapper',
+        children: {
+          className: 'content8-block',
+          img: {
+            className: 'content8-img',
+            children:
+              'http://questnet.cn/image/trophy/g.png',
+          },
+          title: { className: 'content8-title', children: '' },
+          content: {
+            className: 'content8-content',
+            children: '2020测书王者',
+          },
+        },
+      },
+      {
+        name: 'block7',
+        md: 6,
+        xs: 24,
+        className: 'content8-block-wrapper',
+        children: {
+          className: 'content8-block',
+          img: {
+            className: 'content8-img',
+            children:
+              'http://questnet.cn/image/trophy/h.png',
+          },
+          title: { className: 'content8-title', children: '' },
+          content: {
+            className: 'content8-content',
+            children: '2020-年度品牌实效自媒体-enjoy上海',
+          },
+        },
+      },
+      {
+        name: 'block8',
+        md: 6,
+        xs: 24,
+        className: 'content8-block-wrapper',
+        children: {
+          className: 'content8-block',
+          img: {
+            className: 'content8-img',
+            children:
+              'http://questnet.cn/image/trophy/i.png',
+          },
+          title: { className: 'content8-title', children: '' },
+          content: {
+            className: 'content8-content',
+            children: '2020-年度人气实效自媒体-enjoy杭州',
+          },
+        },
+      },
+      {
+        name: 'block8',
+        md: 6,
+        xs: 24,
+        className: 'content8-block-wrapper',
+        children: {
+          className: 'content8-block',
+          img: {
+            className: 'content8-img',
+            children:
+              'http://questnet.cn/image/trophy/j.png',
+          },
+          title: { className: 'content8-title', children: '' },
+          content: {
+            className: 'content8-content',
+            children: '2020-享库存',
+          },
+        },
+      },
+      {
+        name: 'block10',
+        md: 6,
+        xs: 24,
+        className: 'content8-block-wrapper',
+        children: {
+          className: 'content8-block',
+          img: {
+            className: 'content8-img',
+            children:
+              'http://questnet.cn/image/trophy/k.png',
+          },
+          title: { className: 'content8-title', children: '' },
+          content: {
+            className: 'content8-content',
+            children: '2020-享库存-卓越导师奖',
+          },
+        },
+      },
+      {
+        name: 'block11',
+        md: 6,
+        xs: 24,
+        className: 'content8-block-wrapper',
+        children: {
+          className: 'content8-block',
+          img: {
+            className: 'content8-img',
+            children:
+              'http://questnet.cn/image/trophy/l.png',
+          },
+          title: { className: 'content8-title', children: '' },
+          content: {
+            className: 'content8-content',
+            children: '2021-年度品牌自媒体-enjoy上海',
+          },
+        },
+      },
+      {
+        name: 'block12',
+        md: 6,
+        xs: 24,
+        className: 'content8-block-wrapper',
+        children: {
+          className: 'content8-block',
+          img: {
+            className: 'content8-img',
+            children:
+              'http://questnet.cn/image/trophy/m.png',
+          },
+          title: { className: 'content8-title', children: '' },
+          content: {
+            className: 'content8-content',
+            children: '掌中云-年度战略合作伙伴',
+          },
+        },
+      },
+    ],
+  },
+};
+export const Footer10DataSource = {
+  wrapper: { className: 'home-page-wrapper footer1-wrapper' },
+  OverPack: { className: 'footer1', playScale: 0.2 },
+  block: {
+    className: 'home-page kps56ngwnm7-editor_css',
+    gutter: 0,
+    children: [
+      {
+        name: 'block0',
+        xs: 24,
+        md: 9,
+        className: 'block',
+        title: {
+          className: 'logo',
+          children:
+            'http://questnet.cn/image/logo.png',
+        },
+        childWrapper: {
+          className: 'slogan',
+          children: [
+            {
+              name: 'content0',
+              children: '为世界创造快乐.',
+            },
+          ],
+        },
+      },
+      {
+        name: 'block2',
+        xs: 24,
+        md: 9,
+        className: 'block',
+        title: { children: '联系我们' },
+        childWrapper: {
+          children: [
+            {
+              href: 'javascript:void(0)',
+              name: 'link0',
+              children: (
+                <span>
+                  <span>
+                    <span>
+                      <p>电话：17348538372</p>
+                    </span>
+                  </span>
+                </span>
+              ),
+            },
+            {
+              href: 'javascript:void(0)',
+              name: 'link1',
+              children: (
+                <span>
+                  <p>邮箱：wl9511@dingtalk.com</p>
+                </span>
+              ),
+            },
+            {
+              href: 'javascript:void(0)',
+              name: 'link1',
+              children: (
+                <span>
+                  <p>
+                    地址：浙江省杭州市余杭区五常街道联创街188号，贝达梦工场E座2层
+                  </p>
+                </span>
+              ),
+            },
+          ],
+        },
+      },
+    ],
+  },
+  copyrightWrapper: { className: 'copyright-wrapper' },
+  copyrightPage: { className: 'home-page' },
+  copyright: {
+    className: 'copyright',
+    children: (
+      <span>
+        ©2021 杭州趣程网络科技有限公司 版权所有
+      </span>
+    ),
+  },
+};

src/pages/About/documentation.md

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

src/pages/About/index.jsx

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

src/pages/About/less/antMotionStyle.less

@@ -0,0 +1,11 @@
+@import './common.less';
+@import './custom.less';
+@import './content.less';
+@import './nav0.less';
+@import './content13.less';
+@import './teams0.less';
+@import './content9.less';
+@import './feature3.less';
+@import './teams4.less';
+@import './footer1.less';
+@import './edit.less';

src/pages/About/less/common.less

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

src/pages/About/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/pages/About/less/content13.less

@@ -0,0 +1,24 @@
+@content13: content13;
+.@{content13}-wrapper {
+  min-height: 380px;
+  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: 96px 0;
+  &.home-page-wrapper {
+    .title-wrapper {
+      margin-bottom: 32px;
+    }
+  }
+  .title-content {
+    line-height: 32px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{content13}-wrapper {
+    padding-bottom: 0;
+  }
+}

src/pages/About/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: 0px;
+    min-height: 110px;
+    &: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: 24px;
+        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/pages/About/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/pages/About/less/edit.less

@@ -0,0 +1,124 @@
+#Footer1_0 .footer1 > .kps56ngwnm7-editor_css {
+  justify-content: space-around;
+}
+#Content9_0 .block-wrapper > .text-wrapper > .block-content {
+  font-family: Arial Black;
+}
+#Nav0_0 .kpw8lxhxqno-editor_css {
+  position: sticky;
+}
+#Nav0_0
+  .ant-menu-submenu-title
+  > .header0-item-block
+  > .kps4bw7y17d-editor_css {
+  color: #b0b9c3;
+  position: sticky;
+}
+#Nav0_0 .ant-menu-item > .header0-item-block > .kps1yo37x8c-editor_css {
+  color: #ffffff;
+}
+#Teams0_0
+  .banner-anim-elem
+  > .teams0-content-wrapper
+  > .kps4n1g5e6o-editor_css {
+  font-size: 16px;
+  line-height: 2.3;
+  color: rgb(75, 75, 75);
+  text-align: left;
+  width: 100%;
+}
+#Teams0_0
+  .banner-anim-elem
+  > .teams0-content-wrapper
+  > .kps4i5e9roo-editor_css {
+  font-size: 16px;
+  line-height: 2.3;
+  color: rgb(75, 75, 75);
+  text-align: left;
+  width: 100%;
+}
+#Teams0_0 .banner-anim-elem > .teams0-content-wrapper > .kps4mt2wxs-editor_css {
+  font-size: 30px;
+  font-weight: 900;
+  color: rgb(98, 98, 98);
+  border-bottom-width: 50px;
+  margin: 24px auto 50px;
+}
+#Content13_0 .title-wrapper > .kpxe4ue36gk-editor_css {
+  font-size: 36px;
+  color: #ffffff;
+}
+#Nav0_0.kpxe5cib8w-editor_css {
+  position: sticky;
+}
+#Teams4_0.kpxemc5ri6c-editor_css {
+  margin: 140px auto auto;
+}
+#Teams4_0 div > div > .kpxern2s22d-editor_css {
+  justify-content: center;
+}
+#Feature3_0 div > div > .kpxg2ehzlw-editor_css {
+  justify-content: center;
+}
+#Content9_0.kpxmuoey8et-editor_css {
+  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;
+}
+#Content9_0 .block-wrapper > .text-wrapper > .kpxn045lsv-editor_css {
+  color: #f6f6f6;
+}
+#Content9_0 .image-wrapper > .name-wrapper > .kpxn09pmsrm-editor_css {
+  color: #f5f5f5;
+}
+#Content9_0 .block-wrapper > .text-wrapper > .kpxn0dz2kep-editor_css {
+  color: #fcfcfc;
+}
+#Content9_0 .block-wrapper > .text-wrapper > .kpxn0kepndc-editor_css {
+  color: #ffffff;
+}
+#Content9_0 .image-wrapper > .name-wrapper > .kpxn0q0pbgl-editor_css {
+  color: #ffffff;
+}
+#Content9_0 .block-wrapper > .text-wrapper > .kpxn0ts51do-editor_css {
+  font-family: 'Arial Black';
+  color: #fcfcfc;
+}
+#Content9_0 .home-page > .kpxmw5rx1em-editor_css {
+  background-color: rgba(255, 255, 255, 0.4);
+  padding: 10px 0;
+}
+#Content9_0 .kpxmuv2bh2-editor_css {
+  padding: 20px 20px;
+}
+#Feature3_0 .kpxn3ipefc-editor_css {
+  background-color: rgba(184, 182, 182, 0.3);
+}
+#Feature3_0.kpxn3xvuvri-editor_css {
+  margin: 0px 0px;
+}
+#Content9_0 .home-page > .title-wrapper > .kpxmutszulq-editor_css {
+  color: rgb(250, 250, 250);
+  margin: 0px 0;
+}
+#Teams0_0 .kpxn9f9gel-editor_css {
+  padding: 30px 20px 64px;
+}
+
+#Content13_0.kps4irbrinf-editor_css {
+  color: rgb(238, 238, 238);
+  background-image: url(../../../image/dd.jpg);
+  background-position: 0% 0%;
+  background-repeat: repeat;
+  background-size: auto;
+}
+
+@media screen and (max-width: 767px) {
+  #Content13_0.kps4irbrinf-editor_css {
+    background-image: url(http://questnet.cn/image/aa2.jpg);
+  }
+}

src/pages/About/less/feature3.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/pages/About/less/footer1.less

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

src/pages/About/less/nav0.less

@@ -0,0 +1,187 @@
+@header0: header0;
+
+.@{header0} {
+  background: @template-nav-bg-color;
+  width: 100%;
+  z-index: 1;
+  box-shadow: 0 5px 8px fade(#000, 15);
+  position: relative;
+  top: 0;
+
+  .home-page {
+    padding: 0 24px;
+  }
+
+  &-logo {
+    display: inline-block;
+    position: relative;
+    width: 150px;
+    line-height: 64px;
+
+    & img {
+      vertical-align: middle;
+      display: inline-block;
+    }
+
+    & a {
+      display: block;
+    }
+  }
+
+  &-menu {
+    float: right;
+
+    .ant-menu {
+      line-height: 62px;
+      height: 64px;
+
+      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: #fff;
+        margin-left: 46px;
+      }
+
+      &-content {
+        font-size: 12px;
+        color: fade(#fff, 75);
+        margin-left: 46px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{header0} {
+    &-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;
+
+      & 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: #fff;
+        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;
+
+      .@{header0}-mobile-menu {
+        em {
+          &:nth-child(1) {
+            transform: translateY(6px) rotate(45deg);
+          }
+
+          &:nth-child(2) {
+            opacity: 0;
+          }
+
+          &:nth-child(3) {
+            transform: translateY(-6px) rotate(-45deg);
+          }
+        }
+      }
+
+      >.@{header0}-menu {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+    &-item-block {
+      height: 40px;
+      line-height: 40px;
+    }
+  }
+}

src/pages/About/less/teams0.less

@@ -0,0 +1,70 @@
+@teams0: teams0;
+
+.@{teams0}-wrapper {
+  height: 430px;
+  .@{teams0} {
+    padding: 64px 24px;
+    display: flex;
+    align-items: flex-end;
+    .banner-anim {
+      width: 100%;
+      height: 100%;
+    }
+    .banner-anim-thumb {
+      span {
+        background: #e9e9e9;
+        box-shadow: none;
+        &.active {
+          background: @primary-color;
+        }
+      }
+    }
+    & .queue-anim-leaving {
+      position: relative !important;
+    }
+
+    &-banner-user-elem {
+      height: 100%;
+      color: #fff;
+      position: relative;
+      overflow: hidden;
+    }
+    &-image {
+      width: 120px;
+      height: 120px;
+      border-radius: 100%;
+      overflow: hidden;
+      margin: auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 24px;
+      img {
+        height: 100%;
+      }
+    }
+    &-content {
+      font-size: 12px;
+      color: #919191;
+      text-align: center;
+      width: 80%;
+      margin: 8px auto;
+    }
+    &-h1 {
+      font-size: 24px;
+      text-align: center;
+      width: 80%;
+      margin: 24px auto 0;
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{teams0}-wrapper {
+    min-height: 480px;
+
+    .@{teams0} {
+      display: block;
+    }
+  }
+}

src/pages/About/less/teams4.less

@@ -0,0 +1,73 @@
+@content8: content8;
+.@{content8}-wrapper {
+  &.home-page-wrapper {
+    overflow: initial;
+    width: ~"calc(100% - 112px)";
+    min-height: 878px;
+    margin: auto;
+    border-radius: 4px;
+    box-shadow: 0 32px 32px rgba(34, 94, 222, 0.08);
+    background: #fff;
+    & .home-page {
+      padding: 64px 24px;
+      overflow: hidden;
+    }
+  }
+  .content-wrapper {
+    margin-top: 72px;
+    .@{content8}-block-wrapper {
+      margin-bottom: 60px;
+    }
+    .@{content8}-block {
+      width: 100%;
+      max-width: 192px;
+      margin: auto;
+    }
+    .@{content8}-img {
+      border-radius: 8px;
+      overflow: hidden;
+      width: 100%;
+      img {
+        width: 100%;
+        display: block;
+        &[src=""] {
+          background: linear-gradient(to top right, #d6defc, #fff);
+          padding-bottom: 100%;
+        }
+      }
+    }
+    .@{content8}-title {
+      font-size: 20px;
+      color: #0d1a26;
+      font-weight: 400;
+      margin: 24px auto 8px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    .@{content8}-content {
+      text-align: center;
+      white-space: nowrap;
+      font-size: 14px;
+      color: #697b8c;
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{content8}-wrapper.home-page-wrapper {
+    padding-bottom: 0;
+    box-shadow: none;
+    width: 100%;
+    .@{content8} {
+      &.home-page {
+        margin: auto;
+        padding-bottom: 0;
+      }
+    }
+    .content-wrapper {
+      .@{content8}-block {
+        max-width: 240px;
+      }
+    }
+  }
+}

src/pages/About/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/pages/ContactUs/Content13.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import QueueAnim from 'rc-queue-anim';
+import { getChildrenToRender } from './utils';
+
+class Content13 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>
+      </OverPack>
+    );
+  }
+}
+
+export default Content13;

src/pages/ContactUs/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/pages/ContactUs/Footer1.jsx

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

src/pages/ContactUs/Nav0.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import TweenOne from 'rc-tween-one';
+import { Menu } from 'antd';
+import { getChildrenToRender } from './utils';
+
+const { Item, SubMenu } = Menu;
+
+class Header 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={`header0-item-block ${a.className}`.trim()}
+              >
+                {a.children.map(getChildrenToRender)}
+              </div>
+            }
+            popupClassName="header0-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={`header0-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
+                ? {
+                    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="dark"
+            >
+              {navChildren}
+            </Menu>
+          </TweenOne>
+        </div>
+      </TweenOne>
+    );
+  }
+}
+
+export default Header;

src/pages/ContactUs/data.source.js

@@ -0,0 +1,315 @@
+import React from 'react';
+export const Nav00DataSource = {
+  wrapper: { className: 'header0 home-page-wrapper kps4649sxu-editor_css' },
+  page: { className: 'home-page' },
+  logo: {
+    className: 'header0-logo',
+    children: 'http://questnet.cn/image/logo.png',
+  },
+  Menu: {
+    className: 'header0-menu',
+    children: [
+      {
+        name: 'item0',
+        className: 'header0-item',
+        children: {
+          href: '/',
+          children: [
+            {
+              children: (
+                <span>
+                  <span>
+                    <p>首页</p>
+                  </span>
+                </span>
+              ),
+              name: 'text',
+              className: 'kps4bw7y17d-editor_css',
+            },
+          ],
+        },
+        subItem: null,
+      },
+      {
+        name: 'item1',
+        className: 'header0-item kpxidcof26s-editor_css',
+        children: {
+          href: '/about',
+          children: [
+            {
+              children: (
+                <span>
+                  <p>关于我们</p>
+                </span>
+              ),
+              name: 'text',
+              className: 'kps1yo37x8c-editor_css',
+            },
+          ],
+          className: 'kps4dj1m9yt-editor_css',
+        },
+      },
+      {
+        name: 'item2',
+        className: 'header0-item',
+        children: {
+          href: '/introduce',
+          children: [
+            {
+              children: (
+                <span>
+                  <span>
+                    <p>业务介绍</p>
+                  </span>
+                </span>
+              ),
+              name: 'text',
+              className: 'kpxha1k5lhb-editor_css',
+            },
+          ],
+        },
+      },
+      {
+        name: 'item3',
+        className: 'header0-item kpxhg8ghdlt-editor_css ant-menu-item-selected',
+        children: {
+          href: 'javascript:void(0)',
+          children: [
+            {
+              children: (
+                <span>
+                  <span>
+                    <span>
+                      <p>联系我们</p>
+                    </span>
+                  </span>
+                </span>
+              ),
+              name: 'text',
+            },
+          ],
+        },
+      },
+    ],
+  },
+  mobileMenu: { className: 'header0-mobile-menu' },
+};
+export const Content130DataSource = {
+  OverPack: {
+    className: 'home-page-wrapper content13-wrapper kps5irbrinf-editor_css',
+    playScale: 0.3,
+  },
+  titleWrapper: {
+    className: 'title-wrapper',
+    children: [
+      {
+        name: 'title',
+        children: (
+          <span>
+            <span>
+              <span>
+                <p>联系我们</p>
+              </span>
+            </span>
+          </span>
+        ),
+        className: 'title-h1',
+      },
+    ],
+  },
+};
+export const Feature10DataSource = {
+  wrapper: { className: 'home-page-wrapper content1-wrapper' },
+  OverPack: { className: 'home-page content1', playScale: 0.3 },
+  imgWrapper: { className: 'content1-img', md: 10, xs: 24 },
+  img: {
+    children: 'https://zos.alipayobjects.com/rmsportal/nLzbeGQLPyBJoli.png',
+  },
+  textWrapper: { className: 'content1-text', md: 14, xs: 24 },
+  title: {
+    className: 'content1-title',
+    children: (
+      <span>
+        <p>在线阅读</p>
+      </span>
+    ),
+  },
+  content: {
+    className: 'content1-content',
+    children: (
+      <span>
+        <p>
+          通过数字化技术中台，大数据融合，广告创意策划，为在线阅读分发平台提供全渠道精准营销服务，赋能平台增长，共同打造正版在线阅读行业生态。
+        </p>
+      </span>
+    ),
+  },
+};
+export const Feature20DataSource = {
+  wrapper: {
+    className: 'home-page-wrapper content2-wrapper kpxpqci34yg-editor_css',
+  },
+  OverPack: { className: 'home-page content2', playScale: 0.3 },
+  imgWrapper: { className: 'content2-img', md: 10, xs: 24 },
+  img: {
+    children: 'https://zos.alipayobjects.com/rmsportal/tvQTfCupGUFKSfQ.png',
+  },
+  textWrapper: { className: 'content2-text', md: 14, xs: 24 },
+  title: {
+    className: 'content2-title kpxprrsbm18-editor_css',
+    children: (
+      <span>
+        <p>智能营销服务平台</p>
+      </span>
+    ),
+  },
+  content: {
+    className: 'content2-content kpxps7c34va-editor_css',
+    children: (
+      <span>
+        <span>
+          <p>
+            通过多维度智能打标，输出立体客户画像，并进行全生命周期管理，精细化运营提升客户价值，可视化创建营销流程，人工智能自动分发，有效释放企业运营能力。
+          </p>
+        </span>
+      </span>
+    ),
+  },
+};
+export const Feature11DataSource = {
+  wrapper: { className: 'home-page-wrapper content1-wrapper' },
+  OverPack: { className: 'home-page content1', playScale: 0.3 },
+  imgWrapper: { className: 'content1-img', md: 10, xs: 24 },
+  img: {
+    children: 'https://zos.alipayobjects.com/rmsportal/nLzbeGQLPyBJoli.png',
+  },
+  textWrapper: { className: 'content1-text', md: 14, xs: 24 },
+  title: {
+    className: 'content1-title',
+    children: (
+      <span>
+        <p>内容电商</p>
+      </span>
+    ),
+  },
+  content: {
+    className: 'content1-content',
+    children: (
+      <span>
+        <span>
+          <p>
+            透过优质的内容传播，进而引发兴趣和购买，通过新兴媒介手段，<span>
+              直播、短视频、小视频等。
+            </span>
+          </p>
+        </span>
+      </span>
+    ),
+  },
+};
+export const Footer10DataSource = {
+  wrapper: { className: 'home-page-wrapper footer1-wrapper' },
+  OverPack: { className: 'footer1', playScale: 0.2 },
+  block: {
+    className: 'home-page kpxhba4229b-editor_css',
+    gutter: 0,
+    children: [
+      {
+        name: 'block0',
+        xs: 24,
+        md: 9,
+        className: 'block kpxhhlrxpk-editor_css',
+        title: {
+          className: 'logo',
+          children:
+            'http://questnet.cn/image/logo.png',
+        },
+        childWrapper: {
+          className: 'slogan',
+          children: [
+            {
+              name: 'content0',
+              children: 'Animation specification and components of Ant Design.',
+            },
+          ],
+        },
+      },
+      {
+        name: 'block2',
+        xs: 24,
+        md: 9,
+        className: 'block',
+        title: {
+          children: (
+            <span>
+              <span>
+                <p>联系我们</p>
+              </span>
+            </span>
+          ),
+        },
+        childWrapper: {
+          children: [
+            {
+              href: 'javascript:void(0)',
+              name: 'link0',
+              children: (
+                <span>
+                  <span>
+                    <span>
+                      <p>电话：17348538372</p>
+                    </span>
+                  </span>
+                </span>
+              ),
+            },
+            {
+              href: 'javascript:void(0)',
+              name: 'link1',
+              children: (
+                <span>
+                  <p>邮箱：wl9511@dingtalk.com</p>
+                </span>
+              ),
+            },
+            {
+              href: 'javascript:void(0)',
+              name: 'link1',
+              children: (
+                <span>
+                  <p>
+                    地址：浙江省杭州市余杭区五常街道联创街188号，贝达梦工场E座2层
+                  </p>
+                </span>
+              ),
+            },
+          ],
+        },
+      },
+    ],
+  },
+  copyrightWrapper: { className: 'copyright-wrapper' },
+  copyrightPage: { className: 'home-page' },
+  copyright: {
+    className: 'copyright',
+    children: (
+      <span>
+        ©2018 by <a href="https://motion.ant.design">Ant Motion</a> All Rights
+        Reserved
+      </span>
+    ),
+  },
+};
+
+export const Footer00DataSource = {
+  wrapper: { className: 'home-page-wrapper footer0-wrapper' },
+  OverPack: { className: 'home-page footer0', playScale: 0.05 },
+  copyright: {
+    className: 'copyright',
+    children: (
+      <span>
+        ©2021 杭州趣程网络科技有限公司 版权所有
+      </span>
+    ),
+  },
+};

src/pages/ContactUs/documentation.md

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

src/pages/ContactUs/index.jsx

@@ -0,0 +1,92 @@
+/* eslint no-undef: 0 */
+/* eslint arrow-parens: 0 */
+import React from 'react';
+import { enquireScreen } from 'enquire-js';
+
+import Nav0 from './Nav0';
+import Content13 from './Content13';
+import Footer0 from './Footer0';
+
+import {
+  Nav00DataSource,
+  Content130DataSource,
+  Footer00DataSource,
+} from './data.source';
+import './less/antMotionStyle.less';
+
+import MyMap from '../../components/Map'
+
+let isMobile;
+enquireScreen((b) => {
+  isMobile = b;
+});
+
+const { location = {} } = typeof window !== 'undefined' ? window : {};
+
+export default class Home extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isMobile,
+      show: !location.port, // 如果不是 dva 2.0 请删除
+    };
+  }
+
+  componentDidMount() {
+    // 适配手机屏幕;
+    enquireScreen((b) => {
+      this.setState({ isMobile: !!b });
+    });
+    // dva 2.0 样式在组件渲染之后动态加载，导致滚动组件不生效；线上不影响；
+    /* 如果不是 dva 2.0 请删除 start */
+    if (location.port) {
+      // 样式 build 时间在 200-300ms 之间;
+      setTimeout(() => {
+        this.setState({
+          show: true,
+        });
+      }, 500);
+    }
+    /* 如果不是 dva 2.0 请删除 end */
+  }
+
+  render() {
+    const children = [
+      <Nav0
+        id="Nav0_0"
+        key="Nav0_0"
+        dataSource={Nav00DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <Content13
+        id="Content13_0"
+        key="Content13_0"
+        dataSource={Content130DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <MyMap
+        id="Content13_1"
+        key="Content13_1"
+        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/pages/ContactUs/less/antMotionStyle.less

@@ -0,0 +1,8 @@
+@import './common.less';
+@import './custom.less';
+@import './content.less';
+@import './nav0.less';
+@import './content13.less';
+@import './footer1.less';
+@import './edit.less';
+@import './footer0.less';

src/pages/ContactUs/less/common.less

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

src/pages/ContactUs/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/pages/ContactUs/less/content13.less

@@ -0,0 +1,24 @@
+@content13: content13;
+.@{content13}-wrapper {
+  min-height: 380px;
+  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: 96px 0;
+  &.home-page-wrapper {
+    .title-wrapper {
+      margin-bottom: 32px;
+    }
+  }
+  .title-content {
+    line-height: 32px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{content13}-wrapper {
+    padding-bottom: 0;
+  }
+}

src/pages/ContactUs/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/pages/ContactUs/less/edit.less

@@ -0,0 +1,24 @@
+#Footer1_0 .footer1 > .kpxhba4229b-editor_css {
+  justify-content: space-around;
+}
+#Nav0_0.kps4649sxu-editor_css {
+  position: sticky;
+}
+#Footer1_0 .footer1 > .ant-row > .kpxhhlrxpk-editor_css {
+}
+#Feature2_0.kpxpqci34yg-editor_css {
+  background-color: #73c6c0;
+}
+#Feature2_0 .ant-row > .ant-col > .kpxprrsbm18-editor_css {
+  color: #fafafa;
+}
+#Feature2_0 .ant-row > .ant-col > .kpxps7c34va-editor_css {
+  color: #ffffff;
+}
+#Content13_0.kps5irbrinf-editor_css {
+  color: rgb(238, 238, 238);
+  background-image: url(http://questnet.cn/image/d2.jpg);
+  background-position: 0% 0%;
+  background-repeat: repeat;
+  background-size: auto;
+}

src/pages/ContactUs/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/pages/ContactUs/less/footer1.less

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

src/pages/ContactUs/less/nav0.less

@@ -0,0 +1,187 @@
+@header0: header0;
+
+.@{header0} {
+  background: @template-nav-bg-color;
+  width: 100%;
+  z-index: 1;
+  box-shadow: 0 5px 8px fade(#000, 15);
+  position: relative;
+  top: 0;
+
+  .home-page {
+    padding: 0 24px;
+  }
+
+  &-logo {
+    display: inline-block;
+    position: relative;
+    width: 150px;
+    line-height: 64px;
+
+    & img {
+      vertical-align: middle;
+      display: inline-block;
+    }
+
+    & a {
+      display: block;
+    }
+  }
+
+  &-menu {
+    float: right;
+
+    .ant-menu {
+      line-height: 62px;
+      height: 64px;
+
+      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: #fff;
+        margin-left: 46px;
+      }
+
+      &-content {
+        font-size: 12px;
+        color: fade(#fff, 75);
+        margin-left: 46px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{header0} {
+    &-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;
+
+      & 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: #fff;
+        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;
+
+      .@{header0}-mobile-menu {
+        em {
+          &:nth-child(1) {
+            transform: translateY(6px) rotate(45deg);
+          }
+
+          &:nth-child(2) {
+            opacity: 0;
+          }
+
+          &:nth-child(3) {
+            transform: translateY(-6px) rotate(-45deg);
+          }
+        }
+      }
+
+      >.@{header0}-menu {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+    &-item-block {
+      height: 40px;
+      line-height: 40px;
+    }
+  }
+}

src/pages/ContactUs/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/pages/Home/Banner2.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Button } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+import QueueAnim from 'rc-queue-anim';
+import TweenOne, { TweenOneGroup } from 'rc-tween-one';
+import BannerAnim, { Element } from 'rc-banner-anim';
+import { isImg } from './utils';
+import 'rc-banner-anim/assets/index.css';
+
+const BgElement = Element.BgElement;
+class Banner extends React.PureComponent {
+  render() {
+    const { ...props } = this.props;
+    const { dataSource, isMobile } = props;
+    delete props.dataSource;
+    delete props.isMobile;
+    const childrenToRender = dataSource.BannerAnim.children.map((item, i) => {
+      const elem = item.BannerElement;
+      const elemClassName = elem.className;
+      delete elem.className;
+      const bg = item.bg;
+      const textWrapper = item.textWrapper;
+      const title = item.title;
+      const content = item.content;
+      const button = item.button;
+      const page = item.page;
+      const follow = !isMobile
+        ? {
+            delay: 1000,
+            minMove: 0.1,
+            data: [
+              {
+                id: `bg${i}`,
+                value: 15,
+                type: 'x',
+              },
+              { id: `wrapperBlock${i}`, value: -15, type: 'x' },
+            ],
+          }
+        : null;
+      return (
+        <Element
+          key={i.toString()}
+          followParallax={follow}
+          {...elem}
+          prefixCls={elemClassName}
+        >
+          <BgElement key="bg" {...bg} id={`bg${i}`} />
+          <div {...page}>
+            <QueueAnim
+              type={['bottom', 'top']}
+              delay={200}
+              key="text"
+              {...textWrapper}
+              id={`wrapperBlock${i}`}
+            >
+              <div key="logo" {...title}>
+                {typeof title.children === 'string' &&
+                title.children.match(isImg) ? (
+                  <img src={title.children} width="100%" alt="img" />
+                ) : (
+                  title.children
+                )}
+              </div>
+              <div key="content" {...content}>
+                {content.children}
+              </div>
+              <Button type="ghost" key="button" {...button}>
+                {button.children}
+              </Button>
+            </QueueAnim>
+          </div>
+        </Element>
+      );
+    });
+    return (
+      <div {...props} {...dataSource.wrapper}>
+        <TweenOneGroup
+          key="bannerGroup"
+          enter={{ opacity: 0, type: 'from' }}
+          leave={{ opacity: 0 }}
+          component=""
+        >
+          <BannerAnim key="BannerAnim" {...dataSource.BannerAnim}>
+            {childrenToRender}
+          </BannerAnim>
+        </TweenOneGroup>
+        <TweenOne
+          animation={{
+            y: '-=20',
+            yoyo: true,
+            repeat: -1,
+            duration: 1000,
+          }}
+          className="banner2-icon"
+          style={{ bottom: 40 }}
+          key="icon"
+        >
+          <DownOutlined />
+        </TweenOne>
+      </div>
+    );
+  }
+}
+
+export default Banner;

src/pages/Home/Content1.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/pages/Home/Footer1.jsx

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

src/pages/Home/Nav0.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import TweenOne from 'rc-tween-one';
+import { Menu } from 'antd';
+import { getChildrenToRender } from './utils';
+
+const { Item, SubMenu } = Menu;
+
+class Header 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={`header0-item-block ${a.className}`.trim()}
+              >
+                {a.children.map(getChildrenToRender)}
+              </div>
+            }
+            popupClassName="header0-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={`header0-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
+                ? {
+                    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="dark"
+            >
+              {navChildren}
+            </Menu>
+          </TweenOne>
+        </div>
+      </TweenOne>
+    );
+  }
+}
+
+export default Header;

src/pages/Home/data.source.js

@@ -0,0 +1,259 @@
+import React from 'react';
+export const Nav00DataSource = {
+  wrapper: { className: 'header0 home-page-wrapper kps4649sxu-editor_css' },
+  page: { className: 'home-page' },
+  logo: {
+    className: 'header0-logo',
+    children: 'http://questnet.cn/image/logo.png',
+  },
+  Menu: {
+    className: 'header0-menu',
+    children: [
+      {
+        name: 'item0',
+        className: 'header0-item kps3q8i28om-editor_css ant-menu-item ant-menu-item-selected',
+        children: {
+          href: 'javascript:void(0)',
+          children: [
+            {
+              children: (
+                <span>
+                  <p>首页</p>
+                </span>
+              ),
+              name: 'text',
+              className: 'kpwk6wgt6h-editor_css',
+            },
+          ],
+        },
+        subItem: null,
+      },
+      {
+        name: 'item1',
+        className: 'header0-item',
+        children: {
+          href: '/about',
+          children: [
+            {
+              children: (
+                <span>
+                  <span>
+                    <p>
+                      <span>关于我们</span>
+                      <br />
+                    </p>
+                  </span>
+                </span>
+              ),
+              name: 'text',
+            },
+          ],
+        },
+      },
+      {
+        name: 'item2',
+        className: 'header0-item',
+        children: {
+          href: '/introduce',
+          children: [
+            {
+              children: (
+                <span>
+                  <p>业务介绍</p>
+                </span>
+              ),
+              name: 'text',
+            },
+          ],
+        },
+      },
+      {
+        name: 'item3',
+        className: 'header0-item',
+        children: {
+          href: '/contact',
+          children: [
+            {
+              children: (
+                <span>
+                  <span>
+                    <p>联系我们</p>
+                  </span>
+                </span>
+              ),
+              name: 'text',
+            },
+          ],
+        },
+      },
+    ],
+  },
+  mobileMenu: { className: 'header0-mobile-menu' },
+};
+export const Banner20DataSource = {
+  wrapper: { className: 'banner2' },
+  BannerAnim: {
+    children: [
+      {
+        name: 'elem0',
+        BannerElement: { className: 'banner-user-elem' },
+        page: { className: 'home-page banner2-page kpxnf8fr7wg-editor_css' },
+        textWrapper: { className: 'banner2-text-wrapper' },
+        bg: { className: 'bg bg0 kpw7tiua4bo-editor_css' },
+        title: {
+          className: 'banner2-title kpw871zb85-editor_css',
+          children: (
+            <span>
+              <p>为世界创造快乐</p>
+            </span>
+          ),
+        },
+        content: {
+          className: 'banner2-content',
+          children: (
+            <span>
+              <p>
+                <br />
+              </p>
+            </span>
+          ),
+        },
+        button: {
+          className: 'banner2-button kpxngnqlvk-editor_css',
+          children: (
+            <span>
+              <span>
+                <p>
+                  <br />
+                </p>
+              </span>
+            </span>
+          ),
+        },
+      },
+    ],
+  },
+};
+export const Content10DataSource = {
+  wrapper: {
+    className: 'home-page-wrapper content111-wrapper kpxnn7fdgffv4ze-editor_css',
+  },
+  OverPack: { className: 'home-page content111', playScale: 0.3 },
+  imgWrapper: { className: 'content111-img', md: 10, xs: 24 },
+  img: {
+    children: 'https://zos.alipayobjects.com/rmsportal/nLzbeGQLPyBJoli.png',
+  },
+  textWrapper: { className: 'content111-text', md: 14, xs: 24 },
+  title: {
+    className: 'content111-title',
+    children: (
+      <span>
+        <p>关于我们</p>
+      </span>
+    ),
+  },
+  content: {
+    className: 'content111-content',
+    children: (
+      <span>
+        <p>
+          公司创始人从2010年大一开始在校创业，大学四年就已成功积累千万粉丝，2015年成立杭州趣程网络科技有限公司，抓住了移动互联网的发展机遇，通过自研智能数字营销服务平台及产品体系构建，深耕互联网流量获取与运营，经过长达十年的发展探索，成为国内领先的泛娱乐数字营销服务提供商之一。
+        </p>
+      </span>
+    ),
+  },
+};
+export const Footer10DataSource = {
+  wrapper: { className: 'home-page-wrapper footer1-wrapper' },
+  OverPack: { className: 'footer1', playScale: 0.2 },
+  block: {
+    className: 'home-page kps3jk2hi5-editor_css',
+    gutter: 0,
+    children: [
+      {
+        name: 'block0',
+        xs: 24,
+        md: 9,
+        className: 'block',
+        title: {
+          className: 'logo',
+          children:
+            'http://questnet.cn/image/logo.png',
+        },
+        childWrapper: {
+          className: 'slogan',
+          children: [
+            {
+              name: 'content0',
+              children: '为世界创造快乐',
+            },
+          ],
+        },
+      },
+      {
+        name: 'block2',
+        xs: 24,
+        md: 9,
+        className: 'block kpxf0ict2a-editor_css',
+        title: {
+          children: (
+            <span>
+              <span>
+                <span>
+                  <p>联系我们</p>
+                </span>
+              </span>
+            </span>
+          ),
+        },
+        childWrapper: {
+          children: [
+            {
+              href: 'javascript:void(0)',
+              name: 'link0',
+              children: (
+                <span>
+                  <span>
+                    <span>
+                      <p>电话：17348538372</p>
+                    </span>
+                  </span>
+                </span>
+              ),
+            },
+            {
+              href: 'javascript:void(0)',
+              name: 'link1',
+              children: (
+                <span>
+                  <p>邮箱：wl9511@dingtalk.com</p>
+                </span>
+              ),
+            },
+            {
+              href: 'javascript:void(0)',
+              name: 'link1',
+              children: (
+                <span>
+                  <p>
+                    地址：浙江省杭州市余杭区五常街道联创街188号，贝达梦工场E座2层
+                  </p>
+                </span>
+              ),
+            },
+          ],
+        },
+      },
+    ],
+  },
+  copyrightWrapper: { className: 'copyright-wrapper' },
+  copyrightPage: { className: 'home-page' },
+  copyright: {
+    className: 'copyright',
+    children: (
+      <span>
+        ©2021 杭州趣程网络科技有限公司 版权所有
+      </span>
+    ),
+  },
+};

src/pages/Home/documentation.md

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

src/pages/Home/index.jsx

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

src/pages/Home/less/antMotionStyle.less

@@ -0,0 +1,8 @@
+@import './common.less';
+@import './custom.less';
+@import './content.less';
+@import './nav0.less';
+@import './banner2.less';
+@import './content1.less';
+@import './footer1.less';
+@import './edit.less';

src/pages/Home/less/banner2.less

@@ -0,0 +1,133 @@
+
+@banner2: banner2;
+.@{banner2} {
+  // 如果在第一屏且导航位置为 relative, 一屏为 height: calc(100vh - 64px);
+  width: 100%;
+  height: ~"calc(100vh - 64px)";
+  position: relative;
+  border-color: #666;
+  background: #fff;
+  .banner-anim {
+    height: 100%;
+  }
+  & .queue-anim-leaving {
+    position: relative !important;
+    width: auto;
+  }
+  .banner-user-elem {
+    height: 100%;
+    color: #fff;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .bg {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    background-size: cover;
+  }
+  .bg0 {
+    background: url("https://zos.alipayobjects.com/rmsportal/bXNBIyzSLHaycUGDzwLG.jpg") center;
+    background-size: cover;
+    height: 100%;
+    width: ~"calc(100% + 100px)";
+    left: -50px;
+    &:before {
+      width: 100%;
+      height: 100%;
+      content: '';
+      background: fade(#000, 35);
+      display: block;
+    }
+  }
+  .banner-user-elem .banner-user-title {
+    font-size: 22px;
+    top: 40%;
+  }
+  .banner-user-elem .banner-user-text {
+    top: 40%;
+  }
+  &-page {
+    position: relative;
+    top: 20%;
+    max-width: 1200px;
+    margin: auto;
+  }
+  &-text-wrapper {
+    display: inline-block;
+    font-size: 14px;
+    color: @template-text-color-light;
+    width: 400px;
+    text-align: left;
+    .@{banner2}-title {
+      left: 0;
+      margin: auto;
+      position: relative;
+      font-size: 56px;
+    }
+    & .@{banner2}-content {
+      word-wrap: break-word;
+      margin: auto auto 20px;
+      font-weight: lighter;
+    }
+    button {
+      border: 1px solid #fff;
+      color: #fff;
+      background: transparent;
+      transition: background .45s @ease-in, border .45s @ease-in;
+      line-height: 36px;
+      font-size: 16px;
+      height: 36px;
+      & span {
+        text-shadow: 0 0 0 rgba(0, 0, 0, 0);
+        transition: text-shadow .45s @ease-out;
+      }
+      &:hover {
+        color: #fff;
+        border-color: @primary-color;
+        background: @primary-color;
+        transition: background .45s @ease-out, border .45s @ease-out;
+        & span {
+          text-shadow: 1px 1px 3px rgba(0, 0, 0, .35);
+        }
+      }
+    }
+  }
+  &-icon {
+    bottom: 20px;
+    font-size: 24px;
+    position: absolute;
+    z-index: 10;
+    left: 50%;
+    margin-left: -12px;
+    color: @template-text-color-light;
+  }
+}
+
+.banner-anim-thumb-default span {
+  width: 10px;
+  height: 10px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, .5);
+}
+
+@media screen and (max-width: 414px) {
+  .@{banner2} {
+    &-text-wrapper {
+      width: 90%;
+      left: 0;
+      margin: auto;
+      padding: 0;
+      text-align: center;
+      display: block;
+      .logo {
+        width: 90%;
+        left: 0;
+      }
+    }
+  }
+}

src/pages/Home/less/common.less

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

src/pages/Home/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/pages/Home/less/content1.less

@@ -0,0 +1,76 @@
+@content1: content111;
+.@{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/pages/Home/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/pages/Home/less/edit.less

@@ -0,0 +1,43 @@
+#Footer1_0 .footer1 > .kps3jk2hi5-editor_css {
+  align-items: flex-start;
+  justify-content: space-around;
+}
+#Nav0_0.kps4649sxu-editor_css {
+  position: sticky;
+}
+#Banner2_0 .banner-anim > .banner-anim-elem > .kps45irq7rp-editor_css {
+}
+#Banner2_0 .home-page > .banner2-text-wrapper > .kps6n8j5tn9-editor_css {
+  display: block;
+}
+#Banner2_0 .banner-anim > .banner-anim-elem > .kpw7tiua4bo-editor_css {
+  background-clip: padding-box, padding-box;
+}
+#Banner2_0 .home-page > .banner2-text-wrapper > .kpw871zb85-editor_css {
+  justify-content: space-around;
+}
+#Nav0_0 .header0-menu > .ant-menu > .kps3q8i28om-editor_css {
+  color: rgba(255, 255, 255, 1);
+}
+#Nav0_0 .ant-menu-item > .header0-item-block > .kpwk6wgt6h-editor_css {
+  color: #ffffff;
+}
+#Footer1_0 .footer1 > .ant-row > .kpxf0ict2a-editor_css {
+}
+#Banner2_0 .banner-anim > .banner-anim-elem > .kpxnf8fr7wg-editor_css {
+  display: flex;
+  justify-content: center;
+}
+#Banner2_0 .home-page > .banner2-text-wrapper > .kpxngnqlvk-editor_css {
+  display: block;
+  width: 0px;
+  height: 0px;
+  border-top-width: 0px;
+  border-right-width: 0px;
+  border-bottom-width: 0px;
+  border-left-width: 0px;
+  box-shadow: none;
+}
+#Content1_0.kpxnn7fdgffv4ze-editor_css {
+  margin: 30px 0;
+}

src/pages/Home/less/footer1.less

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

src/pages/Home/less/nav0.less

@@ -0,0 +1,187 @@
+@header0: header0;
+
+.@{header0} {
+  background: @template-nav-bg-color;
+  width: 100%;
+  z-index: 1;
+  box-shadow: 0 5px 8px fade(#000, 15);
+  position: relative;
+  top: 0;
+
+  .home-page {
+    padding: 0 24px;
+  }
+
+  &-logo {
+    display: inline-block;
+    position: relative;
+    width: 150px;
+    line-height: 64px;
+
+    & img {
+      vertical-align: middle;
+      display: inline-block;
+    }
+
+    & a {
+      display: block;
+    }
+  }
+
+  &-menu {
+    float: right;
+
+    .ant-menu {
+      line-height: 62px;
+      height: 64px;
+
+      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: #fff;
+        margin-left: 46px;
+      }
+
+      &-content {
+        font-size: 12px;
+        color: fade(#fff, 75);
+        margin-left: 46px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{header0} {
+    &-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;
+
+      & 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: #fff;
+        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;
+
+      .@{header0}-mobile-menu {
+        em {
+          &:nth-child(1) {
+            transform: translateY(6px) rotate(45deg);
+          }
+
+          &:nth-child(2) {
+            opacity: 0;
+          }
+
+          &:nth-child(3) {
+            transform: translateY(-6px) rotate(-45deg);
+          }
+        }
+      }
+
+      >.@{header0}-menu {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+    &-item-block {
+      height: 40px;
+      line-height: 40px;
+    }
+  }
+}

src/pages/Home/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/pages/Introduce/Content13.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import QueueAnim from 'rc-queue-anim';
+import { getChildrenToRender } from './utils';
+
+class Content13 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>
+      </OverPack>
+    );
+  }
+}
+
+export default Content13;

src/pages/Introduce/Feature1.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 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> */}
+          <div>
+            <h1 style={{marginBottom: 20, color: '#000'}}>{dataSource.leftTitle.children}</h1>
+            <div style={{textAlign: 'center'}}>{dataSource.leftContent.children}</div>
+          </div>
+        </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/pages/Introduce/Feature2.jsx

@@ -0,0 +1,78 @@
+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> */}
+      <div>
+        <h1 style={{marginBottom: 20, color: '#fff'}}>{dataSource.leftTitle.children}</h1>
+        <div style={{textAlign: 'center', color: '#fff'}}>{dataSource.leftContent.children}</div>
+      </div>
+    </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;