wjx před 3 roky
rodič
revize
8f6cbc8b51
62 změnil soubory, kde provedl 2216 přidání a 98 odebrání
  1. 5 5
      .umirc.js
  2. 1 0
      package.json
  3. 15 10
      src/components/Partners/index.jsx
  4. 30 8
      src/components/Partners/index.less
  5. binární
      src/image/6D11A1D9-4A4E-488B-B963-369E429C98D2.png
  6. binární
      src/image/IMG_0729.jpg
  7. binární
      src/image/IMG_072912.jpg
  8. binární
      src/image/d1.jpg
  9. binární
      src/image/d1phone.jpg
  10. binární
      src/image/d2.jpg
  11. binární
      src/image/dd.jpg
  12. binární
      src/image/ddPhone.jpg
  13. binární
      src/image/img1.jpg
  14. binární
      src/image/img2.jpg
  15. binární
      src/image/img3.jpg
  16. binární
      src/image/img3phone.jpg
  17. binární
      src/image/img4.jpg
  18. binární
      src/image/img5.jpg
  19. binární
      src/image/img6.jpg
  20. binární
      src/image/img7.webp
  21. binární
      src/image/img8.jpg
  22. binární
      src/image/img9.webp
  23. binární
      src/image/me.jpg
  24. binární
      src/image/mePhone.jpg
  25. binární
      src/image/women.jpg
  26. 27 4
      src/pages/About/data.source.js
  27. 1 1
      src/pages/About/less/content.less
  28. 20 6
      src/pages/About/less/edit.less
  29. 17 0
      src/pages/ContactUs/data.source.js
  30. 19 4
      src/pages/ContactUs/less/edit.less
  31. 1 0
      src/pages/Home/Banner2.jsx
  32. 17 0
      src/pages/Home/data.source.js
  33. 43 0
      src/pages/Home/index.jsx
  34. 1 1
      src/pages/Home/less/banner2.less
  35. 4 3
      src/pages/Home/less/content1.less
  36. 1 1
      src/pages/Introduce/Feature1.jsx
  37. 2 2
      src/pages/Introduce/Feature2.jsx
  38. 111 0
      src/pages/Introduce/Feature5.jsx
  39. 170 16
      src/pages/Introduce/data.source.js
  40. 24 16
      src/pages/Introduce/index.jsx
  41. 1 0
      src/pages/Introduce/less/antMotionStyle.less
  42. 37 14
      src/pages/Introduce/less/edit.less
  43. 75 0
      src/pages/Introduce/less/feature5.less
  44. 65 0
      src/pages/StaffStyle/Activities.jsx
  45. 61 0
      src/pages/StaffStyle/Banner2.jsx
  46. 65 0
      src/pages/StaffStyle/Birthday.jsx
  47. 69 0
      src/pages/StaffStyle/Footer1.jsx
  48. 135 0
      src/pages/StaffStyle/Nav0.jsx
  49. 276 0
      src/pages/StaffStyle/data.source.js
  50. 4 0
      src/pages/StaffStyle/documentation.md
  51. 114 0
      src/pages/StaffStyle/index.jsx
  52. 8 0
      src/pages/StaffStyle/less/antMotionStyle.less
  53. 67 0
      src/pages/StaffStyle/less/banner2.less
  54. 42 0
      src/pages/StaffStyle/less/common.less
  55. 44 0
      src/pages/StaffStyle/less/content.less
  56. 77 0
      src/pages/StaffStyle/less/content1.less
  57. 35 0
      src/pages/StaffStyle/less/custom.less
  58. 124 0
      src/pages/StaffStyle/less/edit.less
  59. 98 0
      src/pages/StaffStyle/less/footer1.less
  60. 187 0
      src/pages/StaffStyle/less/nav0.less
  61. 18 0
      src/pages/StaffStyle/utils.js
  62. 105 7
      yarn.lock

+ 5 - 5
.umirc.js

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

+ 1 - 0
package.json

@@ -9,6 +9,7 @@
     "gh-pages": "gh-pages -d dist"
   },
   "dependencies": {
+    "@ant-design/compatible": "^1.0.8",
     "@uiw/react-baidu-map": "^1.18.15",
     "enquire-js": "^0.2.1",
     "rc-banner-anim": "^2.1.0",

+ 15 - 10
src/components/Partners/index.jsx

@@ -1,6 +1,5 @@
 
 import style from './index.less'
-import Scroll from '../Scroll'
 
 function Partners(props) {
     console.log(props);
@@ -8,15 +7,21 @@ function Partners(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 className={style.banner}>
+            <div className={style.inner}>
+                <div className={style.innerwrapper}>< img src={require('../../image/wy.png')} alt="banner1"/></div>
+                <div className={style.innerwrapper}>< img src={require('../../image/txgg.png')} alt="banner2"/></div>
+                <div className={style.innerwrapper}>< img src={require('../../image/yw.png')} alt="banner3"/></div>
+                <div className={style.innerwrapper}>< img src={require('../../image/zjtd.png')} alt="banner4"/></div>
+                <div className={style.innerwrapper}>< img src={require('../../image/zzy.png')} alt="banner1"/></div>
+                <div className={style.innerwrapper}>< img src={require('../../image/wy.png')} alt="banner1"/></div>
+                <div className={style.innerwrapper}>< img src={require('../../image/txgg.png')} alt="banner2"/></div>
+                <div className={style.innerwrapper}>< img src={require('../../image/yw.png')} alt="banner3"/></div>
+                <div className={style.innerwrapper}>< img src={require('../../image/zjtd.png')} alt="banner4"/></div>
+                <div className={style.innerwrapper}>< img src={require('../../image/zzy.png')} alt="banner1"/></div>
+            </div>
         </div>
     </div>
 }

+ 30 - 8
src/components/Partners/index.less

@@ -11,7 +11,7 @@
         box-sizing: border-box;
         .title{
             font-size: 32px;
-            font-weight: normal;
+            font-weight: bold;
             color: #000;
             text-align: center;
             margin-bottom: 40px;
@@ -19,13 +19,35 @@
     }
 }
 
-.imgs{
+.banner {
+    max-width: 1000px;
+    overflow:hidden;
+    margin:0 auto;
+}
+.inner {
+    position: relative;
     display: flex;
-    justify-content: space-between;
-    flex-direction: row-reverse;
-    .img{
-        width: 170px;
-        height: 86px;
-        margin: 0 10px;
+    justify-content: flex-start;
+    animation: aaa 10s linear;
+    animation-iteration-count: infinite;
+}
+@keyframes aaa {
+    0% {
+        transform: translateX(0%);
+    }
+    100% {
+        transform: translateX(-950px);
     }
+}
+.inner:hover {
+    animation-play-state: paused;
+    cursor: pointer;
+}
+.innerwrapper {
+    width: 170px;
+    margin: 0 10px;
+}
+.banner img {
+    width: 170px;
+    height: 86px;
 }

binární
src/image/6D11A1D9-4A4E-488B-B963-369E429C98D2.png


binární
src/image/IMG_0729.jpg


binární
src/image/IMG_072912.jpg


binární
src/image/d1.jpg


binární
src/image/d1phone.jpg


binární
src/image/d2.jpg


binární
src/image/dd.jpg


binární
src/image/ddPhone.jpg


binární
src/image/img1.jpg


binární
src/image/img2.jpg


binární
src/image/img3.jpg


binární
src/image/img3phone.jpg


binární
src/image/img4.jpg


binární
src/image/img5.jpg


binární
src/image/img6.jpg


binární
src/image/img7.webp


binární
src/image/img8.jpg


binární
src/image/img9.webp


binární
src/image/me.jpg


binární
src/image/mePhone.jpg


binární
src/image/women.jpg


+ 27 - 4
src/pages/About/data.source.js

@@ -71,6 +71,23 @@ export const Nav00DataSource = {
       {
         name: 'item3',
         className: 'header0-item',
+        children: {
+          href: '/staffStyle',
+          children: [
+            {
+              children: (
+                <span>
+                  <p>员工风采</p>
+                </span>
+              ),
+              name: 'text',
+            },
+          ],
+        },
+      },
+      {
+        name: 'item4',
+        className: 'header0-item',
         children: {
           href: '/contact',
           children: [
@@ -152,7 +169,10 @@ export const Teams00DataSource = {
                           公司始于创始人从2010年大一开始在校创业,大学四年就已成功积累千万粉丝。
                         </p>
                         <p>
-                          2015年正式成立杭州趣程网络科技有限公司,抓住了移动互联网的发展机遇,通过自研智能数字营销服务平台及产品体系构建,深耕互联网流量获取与运营,经过长达十年的发展探索,成为国内领先的综合性数字营销服务提供商之一。
+                          2015年正式成立杭州趣程网络科技有限公司,抓住了移动互联网的发展机遇,通过自研智能数字营销服务平台及产品体系构建,
+                        </p>
+                        <p>
+                          深耕互联网流量获取与运营,经过长达十年的发展探索,成为国内领先的综合性数字营销服务提供商之一。
                         </p>
                       </span>
                     </span>
@@ -167,7 +187,10 @@ export const Teams00DataSource = {
                 <span>
                   <span>
                     <p>
-                      目前布局新电商,新媒体,知识付费,网络文学,微信小程序,广告营销,等移动互联网领域发展。与腾讯、阅文、网易等各大互联网公司建立用户的连接与变现合作,探索与其他行业的赋能与合作。
+                      目前布局新电商,新媒体,知识付费,网络文学,微信小程序,广告营销,等移动互联网领域发展。
+                    </p>
+                    <p>
+                      与腾讯、阅文、网易等各大互联网公司建立用户的连接与变现合作,探索与其他行业的赋能与合作。
                     </p>
                   </span>
                 </span>
@@ -626,7 +649,7 @@ export const Feature30DataSource = {
   page: { className: 'home-page content3 kpxn3ipefc-editor_css' },
   OverPack: { playScale: 0.3 },
   titleWrapper: {
-    className: 'title-wrapper',
+    className: 'title-wrapper dasdasdd-title_css',
     children: [
       {
         name: 'title',
@@ -827,7 +850,7 @@ export const Teams40DataSource = {
           'https://gw.alipayobjects.com/zos/rmsportal/PiqyziYmvbgAudYfhuBr.svg',
         className: 'title-image',
       },
-      { name: 'title', children: '所获奖项', className: 'title-h1' },
+      { name: 'title', children: '所获奖项', className: 'title-h1 dasdasdd-title_css' },
     ],
   },
   block: {

+ 1 - 1
src/pages/About/less/content.less

@@ -11,7 +11,7 @@
     will-change: transform;
   }
   .title-wrapper > h1, > h1 {
-    font-size: 32px;
+    font-size: 36px;
     color: @text-color;
     margin-bottom: 16px;
   }

+ 20 - 6
src/pages/About/less/edit.less

@@ -26,6 +26,7 @@
   color: rgb(75, 75, 75);
   text-align: left;
   width: 100%;
+  text-align: center;
 }
 #Teams0_0
   .banner-anim-elem
@@ -36,11 +37,11 @@
   color: rgb(75, 75, 75);
   text-align: left;
   width: 100%;
+  text-align: center;
 }
 #Teams0_0 .banner-anim-elem > .teams0-content-wrapper > .kps4mt2wxs-editor_css {
-  font-size: 30px;
+  font-size: 36px;
   font-weight: 900;
-  color: rgb(98, 98, 98);
   border-bottom-width: 50px;
   margin: 24px auto 50px;
 }
@@ -109,16 +110,29 @@
   padding: 30px 20px 64px;
 }
 
+#Feature3_0 div.dasdasdd-title_css > h1 {
+  font-size: 36px;
+  font-weight: bold;
+}
+
+#Teams4_0 h1.dasdasdd-title_css {
+  font-size: 36px;
+  font-weight: bold;
+}
+
 #Content13_0.kps4irbrinf-editor_css {
   color: rgb(238, 238, 238);
-  background-image: url(../../../image/dd.jpg);
-  background-position: 0% 0%;
+  background-image: url(../../../image/me.jpg);
+  background-position: bottom;
   background-repeat: repeat;
-  background-size: auto;
+  // background-size: auto;
 }
 
 @media screen and (max-width: 767px) {
   #Content13_0.kps4irbrinf-editor_css {
-    background-image: url(http://questnet.cn/image/aa2.jpg);
+    background-image: url(../../../image/me.jpg);
+    background-position: 50% 50%;
+    background-repeat: repeat;
+    background-size: auto 100%;
   }
 }

+ 17 - 0
src/pages/ContactUs/data.source.js

@@ -71,6 +71,23 @@ export const Nav00DataSource = {
       },
       {
         name: 'item3',
+        className: 'header0-item',
+        children: {
+          href: '/staffStyle',
+          children: [
+            {
+              children: (
+                <span>
+                  <p>员工风采</p>
+                </span>
+              ),
+              name: 'text',
+            },
+          ],
+        },
+      },
+      {
+        name: 'item4',
         className: 'header0-item kpxhg8ghdlt-editor_css ant-menu-item-selected',
         children: {
           href: 'javascript:void(0)',

+ 19 - 4
src/pages/ContactUs/less/edit.less

@@ -4,8 +4,6 @@
 #Nav0_0.kps4649sxu-editor_css {
   position: sticky;
 }
-#Footer1_0 .footer1 > .ant-row > .kpxhhlrxpk-editor_css {
-}
 #Feature2_0.kpxpqci34yg-editor_css {
   background-color: #73c6c0;
 }
@@ -17,8 +15,25 @@
 }
 #Content13_0.kps5irbrinf-editor_css {
   color: rgb(238, 238, 238);
-  background-image: url(http://questnet.cn/image/d2.jpg);
-  background-position: 0% 0%;
+  background-image: url(../../../image/dd.jpg);
   background-repeat: repeat;
   background-size: auto;
+  background-position: center;
+}
+
+
+@media screen and (max-width: 767px) {
+  #Content13_0.kps5irbrinf-editor_css {
+    color: rgb(238, 238, 238);
+    background-image: url(../../../image/women.jpg);
+    background-repeat: repeat;
+    background-size: 100% auto;
+    background-position: 50% 50%;
+  }
+
+  #Content13_0 h1.title-h1 p{
+    text-align: left;
+    margin-top: 40px;
+    margin-left: 30px;
+  }
 }

+ 1 - 0
src/pages/Home/Banner2.jsx

@@ -58,6 +58,7 @@ class Banner extends React.PureComponent {
                 {typeof title.children === 'string' &&
                 title.children.match(isImg) ? (
                   <img src={title.children} width="100%" alt="img" />
+                  // <img src='@/image/img5.jpg' width="100%" alt="img" />
                 ) : (
                   title.children
                 )}

+ 17 - 0
src/pages/Home/data.source.js

@@ -70,6 +70,23 @@ export const Nav00DataSource = {
       {
         name: 'item3',
         className: 'header0-item',
+        children: {
+          href: '/staffStyle',
+          children: [
+            {
+              children: (
+                <span>
+                  <p>员工风采</p>
+                </span>
+              ),
+              name: 'text',
+            },
+          ],
+        },
+      },
+      {
+        name: 'item4',
+        className: 'header0-item',
         children: {
           href: '/contact',
           children: [

+ 43 - 0
src/pages/Home/index.jsx

@@ -7,6 +7,11 @@ import Nav0 from './Nav0';
 import Banner2 from './Banner2';
 import Content1 from './Content1';
 import Footer1 from './Footer1';
+import Feature1 from '../Introduce/Feature1';
+import Feature2 from '../Introduce/Feature2';
+import Feature5 from '../Introduce/Feature5';
+
+import Partners from '../../components/Partners'
 
 import {
   Nav00DataSource,
@@ -14,6 +19,14 @@ import {
   Content10DataSource,
   Footer10DataSource,
 } from './data.source';
+
+import {
+  Feature10DataSource,
+  Feature20DataSource,
+  Feature11DataSource,
+  Feature50DataSource
+} from '../Introduce/data.source';
+
 import './less/antMotionStyle.less';
 
 let isMobile;
@@ -70,6 +83,36 @@ export default class Home extends React.Component {
         dataSource={Content10DataSource}
         isMobile={this.state.isMobile}
       />,
+      // <div key="ajshd" style={{fontSize: 36, textAlign: 'center', margin: '50px 0', color: '#404040', fontWeight: 'bold'}}>业务介绍</div>,
+      // <Feature1
+      //   id="Feature1_0_int"
+      //   key="Feature1_0"
+      //   dataSource={Feature10DataSource}
+      //   isMobile={this.state.isMobile}
+      // />,
+      // <Feature2
+      //   id="Feature2_0_int"
+      //   key="Feature2_0_int"
+      //   dataSource={Feature20DataSource}
+      //   isMobile={this.state.isMobile}
+      // />,
+      // <Feature1
+      //   id="Feature1_1_int"
+      //   key="Feature1_1"
+      //   dataSource={Feature11DataSource}
+      //   isMobile={this.state.isMobile}
+      // />,
+      <Feature5
+        id="Feature5_0"
+        key="Feature5_0"
+        dataSource={Feature50DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <Partners
+        id="partners1_1"
+        key="partners1_1"
+        isMobile={this.state.isMobile}
+      />,
       <Footer1
         id="Footer1_0"
         key="Footer1_0"

+ 1 - 1
src/pages/Home/less/banner2.less

@@ -31,7 +31,7 @@
     background-size: cover;
   }
   .bg0 {
-    background: url("https://zos.alipayobjects.com/rmsportal/bXNBIyzSLHaycUGDzwLG.jpg") center;
+    background: url("../../../image/img5.jpg") center;
     background-size: cover;
     height: 100%;
     width: ~"calc(100% + 100px)";

+ 4 - 3
src/pages/Home/less/content1.less

@@ -27,10 +27,11 @@
         position: relative !important;
       }
       .@{content1}-title {
-        font-size: 32px;
-        font-weight: normal;
+        font-size: 36px;
+        font-weight: bold;
         color: #404040;
-        margin-top: 120px;
+        margin-top: 90px;
+        margin-bottom: 30px;
       }
       .content {
         margin-top: 20px;

+ 1 - 1
src/pages/Introduce/Feature1.jsx

@@ -43,7 +43,7 @@ function Content1(props) {
             <img src={dataSource.img.children} width="100%" alt="img" />
           </span> */}
           <div>
-            <h1 style={{marginBottom: 20, color: '#000'}}>{dataSource.leftTitle.children}</h1>
+            <h1 style={{marginBottom: 20 }}>{dataSource.leftTitle.children}</h1>
             <div style={{textAlign: 'center'}}>{dataSource.leftContent.children}</div>
           </div>
         </TweenOne>

+ 2 - 2
src/pages/Introduce/Feature2.jsx

@@ -41,8 +41,8 @@ function Content2(props) {
         <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>
+        <h1 style={{marginBottom: 20}}>{dataSource.leftTitle.children}</h1>
+        <div style={{textAlign: 'center'}}>{dataSource.leftContent.children}</div>
       </div>
     </TweenOne>
   );

+ 111 - 0
src/pages/Introduce/Feature5.jsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import TweenOne from 'rc-tween-one';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import { Tabs, Row, Col } from 'antd';
+import { Icon } from '@ant-design/compatible';
+import { getChildrenToRender } from './utils';
+
+const TabPane = Tabs.TabPane;
+
+class Content7 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      current: 1,
+    };
+  }
+
+  onChange = (key) => {
+    this.setState({ current: parseFloat(key) });
+  };
+
+  getBlockChildren = (item, i) => {
+    const { tag, content } = item;
+    const { text, img } = content;
+    const textChildren = text.children;
+    const { icon } = tag;
+    const iconChildren = icon.children;
+    const tagText = tag.text;
+    return (
+      <TabPane
+        key={i + 1}
+        tab={
+          <div className={tag.className}>
+            <Icon type={iconChildren} className={icon.className} />
+            <div {...tagText}>{tagText.children}</div>
+          </div>
+        }
+        className={item.className}
+      >
+        <TweenOne.TweenOneGroup
+          enter={{
+            y: 30,
+            delay: 300,
+            opacity: 0,
+            type: 'from',
+            ease: 'easeOutQuad',
+          }}
+          leave={null}
+          component=""
+        >
+          {this.state.current === i + 1 && (
+            <Row
+              key="content"
+              className={content.className}
+              gutter={content.gutter}
+            >
+              <Col className={text.className} xs={text.xs} md={text.md}>
+                {textChildren}
+              </Col>
+              <Col className={img.className} xs={img.xs} md={img.md}>
+                <img src={img.children} width="100%" alt="img" />
+              </Col>
+            </Row>
+          )}
+        </TweenOne.TweenOneGroup>
+      </TabPane>
+    );
+  };
+
+  render() {
+    const { ...props } = this.props;
+    const { dataSource } = props;
+    delete props.dataSource;
+    delete props.isMobile;
+    const tabsChildren = 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}>
+            <TweenOne.TweenOneGroup
+              key="tabs"
+              enter={{
+                y: 30,
+                opacity: 0,
+                delay: 200,
+                type: 'from',
+              }}
+              leave={{ y: 30, opacity: 0 }}
+              {...dataSource.tabsWrapper}
+            >
+              <Tabs
+                key="tabs"
+                onChange={this.onChange}
+                activeKey={`${this.state.current}`}
+                {...dataSource.block}
+              >
+                {tabsChildren}
+              </Tabs>
+            </TweenOne.TweenOneGroup>
+          </OverPack>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Content7;

+ 170 - 16
src/pages/Introduce/data.source.js

@@ -72,6 +72,23 @@ export const Nav00DataSource = {
       {
         name: 'item3',
         className: 'header0-item',
+        children: {
+          href: '/staffStyle',
+          children: [
+            {
+              children: (
+                <span>
+                  <p>员工风采</p>
+                </span>
+              ),
+              name: 'text',
+            },
+          ],
+        },
+      },
+      {
+        name: 'item4',
+        className: 'header0-item',
         children: {
           href: '/contact',
           children: [
@@ -100,18 +117,12 @@ export const Content130DataSource = {
     playScale: 0.3,
   },
   titleWrapper: {
-    className: 'title-wrapper',
+    className: 'title-wrapper while_css',
     children: [
       {
         name: 'title',
         children: (
-          <span>
-            <span>
-              <span>
-                <p>业务介绍</p>
-              </span>
-            </span>
-          </span>
+          <p>业务介绍</p>
         ),
         className: 'title-h1',
       },
@@ -119,7 +130,7 @@ export const Content130DataSource = {
   },
 };
 export const Feature10DataSource = {
-  wrapper: { className: 'home-page-wrapper content1-wrapper' },
+  wrapper: { className: 'home-page-wrapper content1-wrapper kpxpqci34yg-editor_css' },
   OverPack: { className: 'home-page content1', playScale: 0.3 },
   imgWrapper: { className: 'content1-img', md: 10, xs: 24 },
   img: {
@@ -133,7 +144,7 @@ export const Feature10DataSource = {
   },
   textWrapper: { className: 'content1-text zdycss', md: 14, xs: 24 },
   title: {
-    className: 'content1-title',
+    className: 'content1-title kpxprrsbm18-editor_css',
     children: (
       <span>
         <p></p>
@@ -141,7 +152,7 @@ export const Feature10DataSource = {
     ),
   },
   content: {
-    className: 'content1-content',
+    className: 'content1-content kpxps7c34va-editor_css',
     children: (
       <span>
         <p>
@@ -153,7 +164,7 @@ export const Feature10DataSource = {
 };
 export const Feature20DataSource = {
   wrapper: {
-    className: 'home-page-wrapper content2-wrapper kpxpqci34yg-editor_css',
+    className: 'home-page-wrapper content2-wrapper',
   },
   OverPack: { className: 'home-page content2', playScale: 0.3 },
   imgWrapper: { className: 'content2-img', md: 10, xs: 24 },
@@ -168,7 +179,7 @@ export const Feature20DataSource = {
   },
   textWrapper: { className: 'content1-text zdycss', md: 14, xs: 24 },
   title: {
-    className: 'content2-title kpxprrsbm18-editor_css',
+    className: 'content2-title',
     children: (
       <span>
         <p></p>
@@ -176,7 +187,7 @@ export const Feature20DataSource = {
     ),
   },
   content: {
-    className: 'content2-content kpxps7c34va-editor_css kpxps7c3asdva-editor_css',
+    className: 'content2-content kpxps7c3asdva-editor_css',
     children: (
       <span>
         <span>
@@ -189,7 +200,7 @@ export const Feature20DataSource = {
   },
 };
 export const Feature11DataSource = {
-  wrapper: { className: 'home-page-wrapper content1-wrapper' },
+  wrapper: { className: 'home-page-wrapper content1-wrapper kpxpqci34yg-editor_css' },
   OverPack: { className: 'home-page content1', playScale: 0.3 },
   imgWrapper: { className: 'content1-img', md: 10, xs: 24 },
   img: {
@@ -211,7 +222,7 @@ export const Feature11DataSource = {
     ),
   },
   content: {
-    className: 'content1-content',
+    className: 'content1-content kpxps7c34va-editor_css',
     children: (
       <span>
         <span>
@@ -225,6 +236,149 @@ export const Feature11DataSource = {
     ),
   },
 };
+
+export const Feature50DataSource = {
+  wrapper: { className: 'home-page-wrapper content7-wrapper' },
+  page: { className: 'home-page content7' },
+  OverPack: {},
+  titleWrapper: {
+    className: 'title-wrapper',
+    children: [
+      {
+        name: 'title',
+        children: (
+          <span>
+            <span>
+              <p style={{fontSize: 36, fontWeight: 'bold'}}>业务介绍</p>
+            </span>
+          </span>
+        ),
+        className: 'title-h1',
+      },
+    ],
+  },
+  tabsWrapper: { className: 'content7-tabs-wrapper' },
+  block: {
+    children: [
+      {
+        name: 'block0',
+        tag: {
+          className: 'content7-tag',
+          text: {
+            children: (
+              <span>
+                <p>在线阅读</p>
+              </span>
+            ),
+            className: 'content7-tag-name',
+          },
+          icon: { children: 'mobile' },
+        },
+        content: {
+          className: 'content7-content',
+          text: {
+            className: 'content7-text',
+            md: 14,
+            xs: 24,
+            children: (
+              <span>
+                <span>
+                  <h2>
+                    通过数字化技术中台,大数据融合,广告创意策划,为在线阅读分发平台提供全渠道精准营销服务,赋能平台增长,共同打造正版在线阅读行业生态。<br />
+                  </h2>
+                </span>
+              </span>
+            ),
+          },
+          img: {
+            className: 'content7-img',
+            children:
+              'https://zos.alipayobjects.com/rmsportal/xBrUaDROgtFBRRL.png',
+            md: 10,
+            xs: 24,
+          },
+        },
+      },
+      {
+        name: 'block1',
+        tag: {
+          className: 'content7-tag',
+          icon: { children: 'fundProjectionScreen' },
+          text: {
+            className: 'content7-tag-name',
+            children: (
+              <span>
+                <p>智能营销服务平台</p>
+              </span>
+            ),
+          },
+        },
+        content: {
+          className: 'content7-content',
+          text: {
+            className: 'content7-text',
+            md: 14,
+            xs: 24,
+            children: (
+              <span>
+                <span>
+                  <h2>
+                    通过多维度智能打标,输出立体客户画像,并进行全生命周期管理,精细化运营提升客户价值,可视化创建营销流程,人工智能自动分发,有效释放企业运营能力。<br />
+                  </h2>
+                </span>
+              </span>
+            ),
+          },
+          img: {
+            className: 'content7-img',
+            md: 10,
+            xs: 24,
+            children:
+              'https://zos.alipayobjects.com/rmsportal/xBrUaDROgtFBRRL.png',
+          },
+        },
+      },
+      {
+        name: 'block2',
+        tag: {
+          className: 'content7-tag',
+          text: {
+            children: (
+              <span>
+                <p>内容电商</p>
+              </span>
+            ),
+            className: 'content7-tag-name',
+          },
+          icon: { children: 'laptop' },
+        },
+        content: {
+          className: 'content7-content',
+          text: {
+            className: 'content7-text',
+            md: 14,
+            xs: 24,
+            children: (
+              <span>
+                <h2>
+                透过优质的内容传播,进而引发兴趣和购买,通过新兴媒介手段,直播、短视频、小视频等。<br />
+                </h2>
+              </span>
+            ),
+          },
+          img: {
+            className: 'content7-img',
+            md: 10,
+            xs: 24,
+            children:
+              'https://zos.alipayobjects.com/rmsportal/xBrUaDROgtFBRRL.png',
+          },
+        },
+      },
+    ],
+  },
+};
+
 export const Footer10DataSource = {
   wrapper: { className: 'home-page-wrapper footer1-wrapper' },
   OverPack: { className: 'footer1', playScale: 0.2 },

+ 24 - 16
src/pages/Introduce/index.jsx

@@ -8,6 +8,7 @@ import Content13 from './Content13';
 import Feature1 from './Feature1';
 import Feature2 from './Feature2';
 import Footer1 from './Footer1';
+import Feature5 from './Feature5';
 
 import {
   Nav00DataSource,
@@ -16,6 +17,7 @@ import {
   Feature20DataSource,
   Feature11DataSource,
   Footer10DataSource,
+  Feature50DataSource
 } from './data.source';
 import './less/antMotionStyle.less';
 
@@ -69,22 +71,28 @@ export default class Home extends React.Component {
         dataSource={Content130DataSource}
         isMobile={this.state.isMobile}
       />,
-      <Feature1
-        id="Feature1_0"
-        key="Feature1_0"
-        dataSource={Feature10DataSource}
-        isMobile={this.state.isMobile}
-      />,
-      <Feature2
-        id="Feature2_0"
-        key="Feature2_0"
-        dataSource={Feature20DataSource}
-        isMobile={this.state.isMobile}
-      />,
-      <Feature1
-        id="Feature1_1"
-        key="Feature1_1"
-        dataSource={Feature11DataSource}
+      // <Feature1
+      //   id="Feature1_0_int"
+      //   key="Feature1_0"
+      //   dataSource={Feature10DataSource}
+      //   isMobile={this.state.isMobile}
+      // />,
+      // <Feature2
+      //   id="Feature2_0_int"
+      //   key="Feature2_0_int"
+      //   dataSource={Feature20DataSource}
+      //   isMobile={this.state.isMobile}
+      // />,
+      // <Feature1
+      //   id="Feature1_1_int"
+      //   key="Feature1_1"
+      //   dataSource={Feature11DataSource}
+      //   isMobile={this.state.isMobile}
+      // />,
+      <Feature5
+        id="Feature5_0"
+        key="Feature5_0"
+        dataSource={Feature50DataSource}
         isMobile={this.state.isMobile}
       />,
       <Partners

+ 1 - 0
src/pages/Introduce/less/antMotionStyle.less

@@ -5,5 +5,6 @@
 @import './content13.less';
 @import './feature1.less';
 @import './feature2.less';
+@import './feature5.less';
 @import './footer1.less';
 @import './edit.less';

+ 37 - 14
src/pages/Introduce/less/edit.less

@@ -4,24 +4,37 @@
 #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;
-}
+#Feature1_0_int.kpxpqci34yg-editor_css {
+  // background-color: #73c6c0;
+  background-color: #fbfbfb;
+}
+// #Feature1_0_int .ant-row > .ant-col > .kpxprrsbm18-editor_css {
+//   color: #fafafa;
+//   // color: #000;
+// }
+// #Feature1_0_int .ant-row > .ant-col > .kpxps7c34va-editor_css {
+//   color: #ffffff;
+// }
+
+#Feature1_1_int.kpxpqci34yg-editor_css {
+  // background-color: #73c6c0;
+  background-color: #fbfbfb;
+}
+// #Feature1_1_int .ant-row > .ant-col > .kpxprrsbm18-editor_css {
+//   color: #fafafa;
+// }
+// #Feature1_1_int .ant-row > .ant-col > .kpxps7c34va-editor_css {
+//   color: #ffffff;
+// }
 
 #Content13_0.kps6irbrinf-editor_css {
   color: rgb(238, 238, 238);
-  background-image: url(http://questnet.cn/image/d1.jpg);
+  // background-image: url(http://questnet.cn/image/d1.jpg);
+  background-image: url('../../../image/img3.jpg');
   background-position: 0% 0%;
   background-repeat: repeat;
-  background-size: auto;
+  // background-size: auto;
+  background-position: bottom;
 }
 
 .zdycss{
@@ -29,8 +42,18 @@
   align-items: center;
 }
 
+#Content13_0 .while_css > h1{
+  color: #ffffff;
+  font-size: 36px;
+}
+
+#Feature5_0{
+  background-color: #fbfbfb;
+}
+
 @media screen and (max-width: 767px) {
   #Content13_0.kps6irbrinf-editor_css {
-    background-image: url(http://questnet.cn/image/bb.jpg);
+    background-image: url('../../../image//img3phone.jpg');
+    background-size: auto;
   }
 }

+ 75 - 0
src/pages/Introduce/less/feature5.less

@@ -0,0 +1,75 @@
+@content7: content7;
+.@{content7}-wrapper {
+  min-height: 720px;
+  .@{content7} {
+    >h1,
+    >p {
+      text-align: center;
+    }
+    &-tag {
+      & i {
+        width: 12px;
+        height: 14px;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 5px;
+      }
+      &-name {
+        display: inline-block;
+      }
+    }
+    .ant-tabs-bar {
+      text-align: center;
+    }
+    .ant-tabs {
+      .ant-tabs-nav {
+        float: none;
+        text-align: center;
+      }
+    }
+    &-tabs-wrapper {
+      position: relative;
+      margin-top: 24px;
+    }
+    &-content {
+      display: flex;
+      align-items: center;
+    }
+    &-text {
+      padding: 24px 48px;
+    }
+    &-img {
+      padding: 24px 48px;
+    }
+    .ant-tabs-tabpane {
+      margin-top: 40px;
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{content7}-wrapper {
+    min-height: 980px;
+    overflow: hidden;
+    .@{content7} {
+      max-width: 100%;
+      &-content {
+        display: block;
+      }
+      &-text,
+      &-img {
+        text-align: left;
+        padding: 0;
+      }
+      &-img {
+        margin-top: 32px;
+      }
+      .ant-tabs-bar {
+        width: auto;
+        .ant-tabs-nav {
+          float: left;
+        }
+      }
+    }
+  }
+}

+ 65 - 0
src/pages/StaffStyle/Activities.jsx

@@ -0,0 +1,65 @@
+import QueueAnim from 'rc-queue-anim';
+import PropTypes from 'prop-types';
+
+
+let dataArray = [
+    { image: 'http://questnet.cn/image/sthd/21.png' },
+    { image: 'http://questnet.cn/image/sthd/22.png' },
+    { image: 'http://questnet.cn/image/sthd/23.png' },
+    { image: 'http://questnet.cn/image/sthd/24.png' },
+    { image: 'http://questnet.cn/image/sthd/25.png' },
+    { image: 'http://questnet.cn/image/sthd/26.png' },
+    { image: 'http://questnet.cn/image/sthd/27.png' },
+    { image: 'http://questnet.cn/image/sthd/28.png' },
+    { image: 'http://questnet.cn/image/sthd/29.png' },
+    { image: 'http://questnet.cn/image/sthd/30.png' },
+    { image: 'http://questnet.cn/image/sthd/31.png' },
+    { image: 'http://questnet.cn/image/sthd/32.png' },
+    { image: 'http://questnet.cn/image/sthd/33.png' },
+    { image: 'http://questnet.cn/image/sthd/34.png' },
+    { image: 'http://questnet.cn/image/sthd/35.png' },
+];
+class Activities extends React.Component {
+    static propTypes = {
+        className: PropTypes.string,
+    };
+
+    static defaultProps = {
+        className: 'pic-details-demo',
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            picOpen: {},
+        };
+    }
+
+
+    render() {
+        return (
+            <div>
+                <QueueAnim type="bottom" className={`${this.props.className}-title`}>
+                    <h1 key="h1">社团活动</h1>
+                    <p>公司有羽毛球社,摄影社,兵乓球社等各种社团,不定期举办比赛,各种奖品等着大家</p>
+                </QueueAnim>
+                <QueueAnim
+                    component="div"
+                    className={`${this.props.className}-image-wrapper`}
+                    interval={0}
+                    type="bottom"
+                >
+                    {
+                        dataArray.map((item, index) => {
+                            if(this.props.isMobile && index + 1 === 15) {
+                                return null
+                            }
+                            return <img src={item.image} key={index}/>
+                        })
+                    }
+                </QueueAnim>
+            </div>
+        );
+    }
+}
+export default Activities

+ 61 - 0
src/pages/StaffStyle/Banner2.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import 'rc-banner-anim/assets/index.css';
+
+
+const videos = ['http://questnet.cn/image/1.mp4', 'http://questnet.cn/image/2.mp4', 'http://questnet.cn/image/3.mp4']
+function Banner(props) {
+  const { isMobile, ...prop } = props;
+  const refVideo = React.useRef(null)
+  const [curr, setCurr] = React.useState(0)  // 播放的哪条视频
+
+  React.useEffect(() => {
+    if(refVideo) {
+      console.log(1111, refVideo);
+      // refVideo.current.addEventListener('ended', () => { //结束
+      //   console.log("播放结束");
+      // }, false);
+    }
+  }, [refVideo])
+
+  const endenHandle = React.useCallback(()=>{
+    if(curr + 1 >= videos.length) {
+      setCurr(0)
+    }else{
+      setCurr(curr + 1)
+    }
+    if(refVideo) {
+      refVideo.current.play()
+    }
+  },[curr, refVideo])
+
+  return (
+    <div {...prop} className="Banner2_0_sty">
+      <div className='home-header__video-bg'>
+        {/* poster="https://overwatch.nosdn.127.net/1/assets/img/pages/home/header-video-poster.jpg" */}
+        <video id="pc-video" muted="muted" ref={refVideo} autoPlay="autoplay" playsInline="playsinline" loop="loop" controls={true} webkit-playsinline="webkit-playsinline" x5-playsinline="x5-playsinline" poster={require('../../image/IMG_072912.jpg')}>
+          <source src={videos[curr]} type="video/mp4" />
+        </video>
+        {/* {
+          curr === 0 && <video id="pc-video" muted="muted" ref={refVideo} autoPlay="autoplay" controls={true} onEnded={endenHandle}  webkit-playsinline="webkit-playsinline" x5-playsinline="x5-playsinline">
+            <source src={'http://questnet.cn/image/1.mp4'} type="video/mp4" />
+          </video>
+        }
+        {
+          curr === 1 && <video id="pc-video" muted="muted" ref={refVideo} autoPlay="autoplay" controls={true} onEnded={endenHandle}  webkit-playsinline="webkit-playsinline" x5-playsinline="x5-playsinline">
+            <source src={'http://questnet.cn/image/2.mp4'} type="video/mp4" />
+          </video>
+        }
+        {
+          curr === 2 && <video id="pc-video" muted="muted" ref={refVideo} autoPlay="autoplay" controls={true} onEnded={endenHandle}  webkit-playsinline="webkit-playsinline" x5-playsinline="x5-playsinline">
+            <source src={'http://questnet.cn/image/2.mp4'} type="video/mp4" />
+          </video>
+        } */}
+      </div>
+      {/* <div className="home-header-content">
+        <h1>员工风采</h1>
+      </div> */}
+    </div>
+  );
+}
+
+export default Banner;

+ 65 - 0
src/pages/StaffStyle/Birthday.jsx

@@ -0,0 +1,65 @@
+import QueueAnim from 'rc-queue-anim';
+import PropTypes from 'prop-types';
+import { Image } from 'antd';
+
+let dataArray = [
+    { image: 'http://questnet.cn/image/sr/1.png' },
+    { image: 'http://questnet.cn/image/sr/2.png' },
+    { image: 'http://questnet.cn/image/sr/3.png' },
+    { image: 'http://questnet.cn/image/sr/4.png' },
+    { image: 'http://questnet.cn/image/sr/5.png' },
+    { image: 'http://questnet.cn/image/sr/6.png' },
+    { image: 'http://questnet.cn/image/sr/7.png' },
+    { image: 'http://questnet.cn/image/sr/8.png' },
+    { image: 'http://questnet.cn/image/sr/9.png' },
+    { image: 'http://questnet.cn/image/sr/10.png' },
+    { image: 'http://questnet.cn/image/sr/11.png' },
+    { image: 'http://questnet.cn/image/sr/12.png' },
+    { image: 'http://questnet.cn/image/sr/13.png' },
+    { image: 'http://questnet.cn/image/sr/14.png' },
+    { image: 'http://questnet.cn/image/sr/15.png' },
+];
+class PicDetailsDemo extends React.Component {
+    static propTypes = {
+        className: PropTypes.string,
+    };
+
+    static defaultProps = {
+        className: 'pic-details-demo',
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            picOpen: {},
+        };
+    }
+
+    render() {
+        return (
+            <div>
+                <QueueAnim type="bottom" className={`${this.props.className}-title`}>
+                    <h1 key="h1">员工生日会</h1>
+                    <p>公司每月月底会给当月员工举办生日会</p>
+                </QueueAnim>
+                <QueueAnim
+                    component="div"
+                    className={`${this.props.className}-image-wrapper`}
+                    interval={0}
+                    type="bottom"
+                >
+                    {
+                        dataArray.map((item, index) => {
+                            if(this.props.isMobile && index + 1 === 15) {
+                                return null
+                            }
+                            // return <Image src={item.image} key={index} />
+                            return <img src={item.image} key={index}/>
+                        })
+                    }
+                </QueueAnim>
+            </div>
+        );
+    }
+}
+export default PicDetailsDemo

+ 69 - 0
src/pages/StaffStyle/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;

+ 135 - 0
src/pages/StaffStyle/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;

+ 276 - 0
src/pages/StaffStyle/data.source.js

@@ -0,0 +1,276 @@
+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>
+                  <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  kps3q8i28om-editor_css ant-menu-item ant-menu-item-selected',
+        children: {
+          href: '/staffStyle',
+          children: [
+            {
+              children: (
+                <span>
+                  <p>员工风采</p>
+                </span>
+              ),
+              name: 'text',
+            },
+          ],
+        },
+      },
+      {
+        name: 'item4',
+        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_0_sty' },
+  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>
+    ),
+  },
+};

+ 4 - 0
src/pages/StaffStyle/documentation.md

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

+ 114 - 0
src/pages/StaffStyle/index.jsx

@@ -0,0 +1,114 @@
+/* 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 Footer1 from './Footer1';
+import Birthday from './Birthday'
+import Activities from './Activities'
+
+import {
+  Nav00DataSource,
+  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_sty"
+        key="Banner2_0"
+        isMobile={this.state.isMobile}
+      />,
+      <Birthday
+        id="birthday"
+        key="birthday"
+        isMobile={this.state.isMobile}
+      />,
+      <div id="sr" key="sr">
+        <div>
+          <h1>员工活动</h1>
+          <div>
+            <div>
+              <img src={require('../../image/6D11A1D9-4A4E-488B-B963-369E429C98D2.png')} />
+              <h3>公司团建</h3>
+              <p>趣程在每年的六七月份,面向员工组织公司团建,可以强身健体、增进员工与员工之间的感情。</p>
+            </div>
+            <div>
+              <img src={require('../../image/IMG_0729.jpg')} />
+              <h3>公司年会</h3>
+              <p>自趣程创立以来,每年年底,全体员工欢聚一堂,凝聚才华与激情创作出一个个精彩的节目,增加同事之间的感情,同时激励员工在新的一年里再接再厉。</p>
+            </div>
+          </div>
+        </div>
+      </div>,
+      <Activities
+        id="activities"
+        key="activities"
+        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>
+    );
+  }
+}

+ 8 - 0
src/pages/StaffStyle/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';

+ 67 - 0
src/pages/StaffStyle/less/banner2.less

@@ -0,0 +1,67 @@
+
+@banner2: Banner2_0_sty;
+.@{banner2} {
+  position: relative;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  justify-content: center;
+  height: ~"calc(100vh - 64px)";
+  min-height: 600px;
+  overflow: hidden;
+
+  .home-header__video-bg{
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    &>video{
+      position: absolute;
+      display: block;
+      min-height: 100%;
+      min-width: 100%;
+      width: auto;
+      height: auto;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+    }
+  }
+  .home-header-content{
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50, -50%);
+    &>h1{
+      font-size: 40px;
+      color: #fff;
+    }
+  }
+}
+
+.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;
+      }
+    }
+  }
+}

+ 42 - 0
src/pages/StaffStyle/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;
+}

+ 44 - 0
src/pages/StaffStyle/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;
+      }
+    }
+  }
+}

+ 77 - 0
src/pages/StaffStyle/less/content1.less

@@ -0,0 +1,77 @@
+@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: 36px;
+        font-weight: bold;
+        color: #404040;
+        margin-top: 90px;
+        margin-bottom: 30px;
+      }
+      .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;
+        }
+      }
+    }
+  }
+}

+ 35 - 0
src/pages/StaffStyle/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);
+  }
+}

+ 124 - 0
src/pages/StaffStyle/less/edit.less

@@ -0,0 +1,124 @@
+#Footer1_0 .footer1 > .kps3jk2hi5-editor_css {
+  align-items: flex-start;
+  justify-content: space-around;
+}
+#Nav0_0.kps4649sxu-editor_css {
+  position: sticky;
+}
+#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;
+}
+#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;
+}
+
+
+#sr{
+  width: 100%;
+  background-color: #fbfbfb;
+  padding: 96px 0;
+  box-sizing: border-box;
+  &>div{
+    max-width: 1200px;
+    margin: 0 auto;
+    h1{
+      text-align: center;
+      font-size: 36px;
+      margin-bottom: 30px;
+    }
+    &>div{
+      display: flex;
+      justify-content: space-between;
+  
+      &>div{
+        width: 49%;
+        &>img{
+          width: 100%;
+        }
+        &>h3{
+          font-family: initial;
+          font-size: 20px;
+          line-height: 36px;
+          font-weight: bold;
+          margin: 24px 0 8px;
+        }
+      }
+    }
+  }
+}
+
+.pic-details-demo-title {
+  width: 95%;
+  margin: 0 auto;
+  padding: 96px 0 50px;
+  box-sizing: border-box;
+  text-align: center;
+}
+.pic-details-demo-title h1 {
+  color: #000000;
+  font-size: 36px;
+}
+
+.pic-details-demo-title p {
+  color: #878787;
+  font-size: 12px;
+}
+.pic-details-demo-image-wrapper {
+  position: relative;
+  max-width: 1200px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0 auto 40px;
+  img{
+    width: 19%;
+    margin-bottom: 20px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .pic-details-demo-image-wrapper {
+    margin: 0 10px;
+    img{
+      width: 48%;
+    }
+  }
+  #sr{
+    &>div{
+      &>div{
+        flex-wrap: wrap;
+        justify-content: center;
+        margin: 0 20px;
+        &>div{
+          width: 100%;
+        }
+      }
+    }
+  }
+}

+ 98 - 0
src/pages/StaffStyle/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%;
+      }
+    }
+  }
+}

+ 187 - 0
src/pages/StaffStyle/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;
+    }
+  }
+}

+ 18 - 0
src/pages/StaffStyle/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);
+};

+ 105 - 7
yarn.lock

@@ -17,12 +17,27 @@
   dependencies:
     "@ctrl/tinycolor" "^3.4.0"
 
+"@ant-design/compatible@^1.0.8":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@ant-design/compatible/-/compatible-1.0.8.tgz#649471efb450c374dcf7d9d128aad0b576d225db"
+  integrity sha512-nwIf0ev3kXO6m6DrGarMsDLfL/a9xvcVRzvxmPDtMKLbiLMrPwqSOxvE7gPoZwM/X6gcMdkJUvvH2orQtdtT4Q==
+  dependencies:
+    "@ant-design/icons" "^4.0.0"
+    classnames "^2.2.6"
+    lodash.camelcase "^4.3.0"
+    lodash.upperfirst "^4.3.1"
+    omit.js "^1.0.2"
+    rc-animate "^2.10.2"
+    rc-editor-mention "^1.1.13"
+    rc-form "^2.4.10"
+    rc-util "^4.10.0"
+
 "@ant-design/icons-svg@^4.0.0":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.1.0.tgz#480b025f4b20ef7fe8f47d4a4846e4fee84ea06c"
   integrity sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ==
 
-"@ant-design/icons@^4.1.0", "@ant-design/icons@^4.6.2":
+"@ant-design/icons@^4.0.0", "@ant-design/icons@^4.1.0", "@ant-design/icons@^4.6.2":
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-4.6.2.tgz#290f2e8cde505ab081fda63e511e82d3c48be982"
   integrity sha512-QsBG2BxBYU/rxr2eb8b2cZ4rPKAPBpzAR+0v6rrZLp/lnyvflLH3tw1vregK+M7aJauGWjIGNdFmUfpAOtw25A==
@@ -1759,6 +1774,11 @@ async-validator@^3.0.3:
   resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-3.5.2.tgz#68e866a96824e8b2694ff7a831c1a25c44d5e500"
   integrity sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ==
 
+async-validator@~1.11.3:
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.11.5.tgz#9d43cf49ef6bb76be5442388d19fb9a6e47597ea"
+  integrity sha512-XNtCsMAeAH1pdLMEg1z8/Bb3a8cdCbui9QbJATRFHHHW5kT6+NPI3zSVQUXgikTFITzsg+kYY5NTWhM2Orwt9w==
+
 async@^2.4.1, async@^2.6.1:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
@@ -2604,7 +2624,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.6.0:
+create-react-class@^15.5.3, create-react-class@^15.6.0:
   version "15.7.0"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.7.0.tgz#7499d7ca2e69bb51d13faf59bd04f0c65a1d6c1e"
   integrity sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==
@@ -2946,6 +2966,11 @@ dom-align@1.x, dom-align@^1.7.0:
   resolved "https://registry.yarnpkg.com/dom-align/-/dom-align-1.12.2.tgz#0f8164ebd0c9c21b0c790310493cd855892acd4b"
   integrity sha512-pHuazgqrsTFrGU2WLDdXxCFabkdQDx72ddkraZNih1KsMcN5qsRSTR9O4VJRlwTPCPb5COYg3LOfiMHHcPInHg==
 
+dom-scroll-into-view@1.x, dom-scroll-into-view@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz#e8f36732dd089b0201a88d7815dc3f88e6d66c7e"
+  integrity sha1-6PNnMt0ImwIBqI14Fdw/iObWbH4=
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -3010,6 +3035,15 @@ dot-prop@^5.2.0:
   dependencies:
     is-obj "^2.0.0"
 
+draft-js@^0.10.0, draft-js@~0.10.0:
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/draft-js/-/draft-js-0.10.5.tgz#bfa9beb018fe0533dbb08d6675c371a6b08fa742"
+  integrity sha512-LE6jSCV9nkPhfVX2ggcRLA4FKs6zWq9ceuO/88BpXdNCS7mjRTgs0NsV6piUCJX9YxMsB9An33wnkMmU2sD2Zg==
+  dependencies:
+    fbjs "^0.8.15"
+    immutable "~3.7.4"
+    object-assign "^4.1.0"
+
 dva-core@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/dva-core/-/dva-core-2.0.4.tgz#086665d1d5f684e089c5bfac9ba388d91cc9050a"
@@ -3736,7 +3770,7 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
-fbjs@^0.8.3:
+fbjs@^0.8.15, fbjs@^0.8.3:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
@@ -4421,11 +4455,16 @@ immer@^7.0.5:
   resolved "https://registry.yarnpkg.com/immer/-/immer-7.0.15.tgz#dc3bc6db87401659d2e737c67a21b227c484a4ad"
   integrity sha512-yM7jo9+hvYgvdCQdqvhCNRRio0SCXc8xDPzA25SvKWa7b1WVPjLwQs1VYU5JPXjcJPTqAa5NP5dqpORGYBQ2AA==
 
-immutable@^3.8.1:
+immutable@^3.7.4, immutable@^3.8.1:
   version "3.8.2"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
   integrity sha1-wkOZUUVbs5kT2vKBN28VMOEErfM=
 
+immutable@~3.7.4:
+  version "3.7.6"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
+  integrity sha1-E7TTyxK++hVIKib+Gy665kAHHks=
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -5751,6 +5790,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+  integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -5776,7 +5820,12 @@ lodash.throttle@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
 
-lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
+lodash.upperfirst@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/lodash.upperfirst/-/lodash.upperfirst-4.3.1.tgz#1365edf431480481ef0d1c68957a5ed99d49f7ce"
+  integrity sha1-E2Xt9DFIBIHvDRxolXpe2Z1J984=
+
+lodash@^4.16.5, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -6338,6 +6387,13 @@ object.values@^1.1.3, object.values@^1.1.4:
     define-properties "^1.1.3"
     es-abstract "^1.18.2"
 
+omit.js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/omit.js/-/omit.js-1.0.2.tgz#91a14f0eba84066dfa015bf30e474c47f30bc858"
+  integrity sha512-/QPc6G2NS+8d4L/cQhbk6Yit1WTB6Us2g84A7A/1+w9d/eRGHyEqC5kkQtHVoHZ5NFWGG7tUGgrhVZwgZanKrQ==
+  dependencies:
+    babel-runtime "^6.23.0"
+
 once@^1.3.0, once@^1.3.1, once@^1.3.3, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -7323,7 +7379,7 @@ rc-align@^4.0.0:
     rc-util "^5.3.0"
     resize-observer-polyfill "^1.5.1"
 
-rc-animate@2.x, rc-animate@^2.4.4:
+rc-animate@2.x, rc-animate@^2.10.2, rc-animate@^2.3.0, rc-animate@^2.4.4:
   version "2.11.1"
   resolved "https://registry.yarnpkg.com/rc-animate/-/rc-animate-2.11.1.tgz#2666eeb6f1f2a495a13b2af09e236712278fdb2c"
   integrity sha512-1NyuCGFJG/0Y+9RKh5y/i/AalUCA51opyyS/jO2seELpgymZm2u9QV3xwODwEuzkmeQ1BDPxMLmYLcTJedPlkQ==
@@ -7426,6 +7482,33 @@ rc-dropdown@^3.2.0, rc-dropdown@~3.2.0:
     classnames "^2.2.6"
     rc-trigger "^5.0.4"
 
+rc-editor-core@~0.8.3:
+  version "0.8.10"
+  resolved "https://registry.yarnpkg.com/rc-editor-core/-/rc-editor-core-0.8.10.tgz#6f215bc5df9c33ffa9f6c5b30ca73a7dabe8ab7c"
+  integrity sha512-T3aHpeMCIYA1sdAI7ynHHjXy5fqp83uPlD68ovZ0oClTSc3tbHmyCxXlA+Ti4YgmcpCYv7avF6a+TIbAka53kw==
+  dependencies:
+    babel-runtime "^6.26.0"
+    classnames "^2.2.5"
+    draft-js "^0.10.0"
+    immutable "^3.7.4"
+    lodash "^4.16.5"
+    prop-types "^15.5.8"
+    setimmediate "^1.0.5"
+
+rc-editor-mention@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/rc-editor-mention/-/rc-editor-mention-1.1.13.tgz#9f1cab1065f86b01523840321790c2ab12ac5e8b"
+  integrity sha512-3AOmGir91Fi2ogfRRaXLtqlNuIwQpvla7oUnGHS1+3eo7b+fUp5IlKcagqtwUBB5oDNofoySXkLBxzWvSYNp/Q==
+  dependencies:
+    babel-runtime "^6.23.0"
+    classnames "^2.2.5"
+    dom-scroll-into-view "^1.2.0"
+    draft-js "~0.10.0"
+    immutable "~3.7.4"
+    prop-types "^15.5.8"
+    rc-animate "^2.3.0"
+    rc-editor-core "~0.8.3"
+
 rc-field-form@~1.20.0:
   version "1.20.1"
   resolved "https://registry.yarnpkg.com/rc-field-form/-/rc-field-form-1.20.1.tgz#d1c51888107cf075b42704b7b575bef84c359291"
@@ -7435,6 +7518,21 @@ rc-field-form@~1.20.0:
     async-validator "^3.0.3"
     rc-util "^5.8.0"
 
+rc-form@^2.4.10:
+  version "2.4.12"
+  resolved "https://registry.yarnpkg.com/rc-form/-/rc-form-2.4.12.tgz#4ee8711e90a2584baa7ac276de96bee0d9b0f5f1"
+  integrity sha512-sHfyWRrnjCHkeCYfYAGop2GQBUC6CKMPcJF9h/gL/vTmZB/RN6fNOGKjXrXjFbwFwKXUWBoPtIDDDmXQW9xNdw==
+  dependencies:
+    async-validator "~1.11.3"
+    babel-runtime "6.x"
+    create-react-class "^15.5.3"
+    dom-scroll-into-view "1.x"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.4"
+    rc-util "^4.15.3"
+    react-is "^16.13.1"
+    warning "^4.0.3"
+
 rc-gesture@~0.0.18, rc-gesture@~0.0.22:
   version "0.0.22"
   resolved "https://registry.yarnpkg.com/rc-gesture/-/rc-gesture-0.0.22.tgz#fbcbdd5b46387a978b3ede48b42748e8ff77dddd"
@@ -7788,7 +7886,7 @@ rc-upload@~4.3.0:
     classnames "^2.2.5"
     rc-util "^5.2.0"
 
-rc-util@4.x, rc-util@^4.0.4, rc-util@^4.15.3, rc-util@^4.4.0:
+rc-util@4.x, rc-util@^4.0.4, rc-util@^4.10.0, rc-util@^4.15.3, rc-util@^4.4.0:
   version "4.21.1"
   resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-4.21.1.tgz#88602d0c3185020aa1053d9a1e70eac161becb05"
   integrity sha512-Z+vlkSQVc1l8O2UjR3WQ+XdWlhj5q9BMQNLk2iOBch75CqPfrJyGtcWMcnhRlNuDu0Ndtt4kLVO8JI8BrABobg==