fix

src/components/Banner/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import style from './index.less'
+
+function Banner(props) {
+    let {title = '', subtitle = '', backUrl = ''} = props
+    return <div className={style.banner} style={backUrl && {backgroundImage: `url(${backUrl})`}}>
+        <div className={style.content}>
+            <div className={style.nr}>
+                <h1 className={style.title}>{title}</h1>
+                <h3 className={style.subtitle}>{subtitle}</h3>
+            </div>
+        </div>
+    </div>
+}
+
+export default Banner

src/components/Banner/index.less

@@ -0,0 +1,51 @@
+.banner{
+    color: #7c7c7c;
+    background-image: url(https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/webpEC6C61DF34B343BE9C92CCAB60CA3BA6.webp);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-attachment: scroll;
+    background-position: center center;
+    transition: opacity 2s ease-in-out;
+    min-height: 80vh;
+    max-height: 80vh;
+    overflow: hidden;
+    .content{
+        width: 100%;
+        min-height: 80vh;
+        max-height: 80vh;
+        background-color: rgba(0, 0, 0, .6);
+        transition: opacity 2s ease-in-out;
+        position: relative;
+        .nr{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+        .title{
+            text-align: center;
+            font-size: 66px;
+            color: #fff;
+            margin-bottom: 30px;
+        }
+        .subtitle{
+            font-size: 18px;
+            color: #fff;
+            text-align: center;
+            margin-top: 30px;
+            letter-spacing: 4px;
+        }
+    }
+}
+
+@media screen and (max-width: 767px) {
+    .banner{
+        min-height: 40vh;
+        .content{
+            min-height: 40vh;
+            .title{
+                font-size: 34px;
+            }
+        }
+    }
+}

src/components/Partners/index.jsx

@@ -6,6 +6,7 @@ function Partners(props) {
     let {isMobile} = props
     return <div className={style.partners}>
         <div className={style.content}>
+            <h3 className={style.enTitle}>COOPERATIVE PARTNER</h3>
             <div className={style.title}>合作伙伴</div>
         </div>
 

src/components/Partners/index.less

@@ -1,20 +1,24 @@
 .partners{
     background: url(../../image/AD0I98nwCRAEGAAggYvl7QUotp_hrgcwgA84hAM.png) repeat top ,transparent;
-    height: 280px;
+    // height: 280px;
     background-size: cover;
+    padding: 50px 0;
+    box-sizing: border-box;
     .content{
         max-width: 1000px;
         position: relative;
         margin: auto;
         will-change: transform;
-        padding: 30px 0;
-        box-sizing: border-box;
+        .enTitle{
+            color: #a16767;
+            text-align: center;
+        }
         .title{
-            font-size: 32px;
-            font-weight: bold;
+            font-size: 44px;
             color: #000;
             text-align: center;
-            margin-bottom: 40px;
+            box-sizing: border-box;
+            padding: 15px 0px 50px;
         }
     }
 }

src/pages/About/SenseOfWorth.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+function SenseOfWorth(props) {
+    return <div className="senseOfWorth001">
+        <div className="senseOfWorth_content">
+            <h3 className="senseOfWorth_enTitle">SENSE OF WORTH</h3>
+            <h1 className='senseOfWorth_title'>价值观</h1>
+            <div className="senseOfWorth_nr">
+                <div>
+                    <img src="https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/webpC67F42DFB3814297BB14CF044BBBE60C.webp" />
+                    <div>
+                        <p>用户第一</p>
+                        <p>一切站在用户角度看问题，用深刻的用户思维，数据思维，理解用户，服务用户。</p>
+                    </div>
+                </div>
+                <div>
+                    <img src="https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/webp3FBF689FB29A4BDD90E02FE049A1FBA4.webp" />
+                    <div>
+                        <p>追求极致</p>
+                        <p>不甘平庸，积极进取，要做就要做到最好，拥有一颗冠军的心</p>
+                    </div>
+                </div>
+                <div>
+                    <img src="https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/webp064537A1B9EC4748B26CA5934E5BB75E.webp" />
+                    <div>
+                        <p>坦诚开放</p>
+                        <p>坦率 真诚 简单 不拐弯抹角 乐于表达分享 开放沟通交流。</p>
+                    </div>
+                </div>
+                <div>
+                    <img src="https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/webp6E7FD4B1851A45DB997617B671FB845C.webp" />
+                    <div>
+                        <p>拥抱变化</p>
+                        <p>脚踏实地，拥抱变化，自我驱动，开拓创新。</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+}
+
+export default SenseOfWorth

src/pages/About/data.source.js

@@ -151,8 +151,9 @@ export const Teams00DataSource = {
               name: 'title',
               children: (
                 <span>
+                  <h3 style={{color: '#a16767', fontSize: '16px'}}>COMPANY PROFILE</h3>
                   <span>
-                    <p>公司简介</p>
+                    <p style={{padding: '15px 0 0', boxSizing: 'border-box'}}>公司简介</p>
                   </span>
                 </span>
               ),
@@ -211,18 +212,13 @@ export const Content90DataSource = {
   titleWrapper: {
     className: 'title-wrapper',
     children: [
-      {
-        name: 'image',
-        children:
-          'https://gw.alipayobjects.com/zos/rmsportal/PiqyziYmvbgAudYfhuBr.svg',
-        className: 'title-image',
-      },
       {
         name: 'title',
         children: (
           <span>
+            <h3 style={{color: '#a16767', fontSize: '16px'}}>DEVELOPMENT HISTORY</h3>
             <span>
-              <p>发展历程</p>
+              <p style={{fontSize: 44, padding: '15px 0 0', boxSizing: 'border-box'}}>发展历程</p>
             </span>
           </span>
         ),
@@ -844,13 +840,14 @@ export const Teams40DataSource = {
   titleWrapper: {
     className: 'title-wrapper',
     children: [
-      {
-        name: 'image',
-        children:
-          'https://gw.alipayobjects.com/zos/rmsportal/PiqyziYmvbgAudYfhuBr.svg',
-        className: 'title-image',
+      { 
+        name: 'title', 
+        children: <span>
+          <h3 style={{color: '#a16767', fontSize: '16px'}}>DEVELOPMENT HISTORY</h3>
+          <p style={{padding: '15px 0 0', boxSizing: 'border-box'}}>所获奖项</p>
+        </span>, 
+        className: 'title-h1 dasdasdd-title_css'
       },
-      { name: 'title', children: '所获奖项', className: 'title-h1 dasdasdd-title_css' },
     ],
   },
   block: {

src/pages/About/index.jsx

@@ -7,16 +7,16 @@ 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 SenseOfWorth from './SenseOfWorth'
+import Banner from '../../components/Banner';
 
 import {
   Nav00DataSource,
   Content130DataSource,
   Teams00DataSource,
   Content90DataSource,
-  Feature30DataSource,
   Teams40DataSource,
   Footer10DataSource,
 } from './data.source';
@@ -64,12 +64,17 @@ export default class Home extends React.Component {
         dataSource={Nav00DataSource}
         isMobile={this.state.isMobile}
       />,
-      <Content13
-        id="Content13_0"
-        key="Content13_0"
-        dataSource={Content130DataSource}
-        isMobile={this.state.isMobile}
+      <Banner
+        key="Banner_43"
+        title="关于我们"
+        backUrl="https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/jpgCEDC614CF9AA4B908A94269E65F97A15.jpg"
       />,
+      // <Content13
+      //   id="Content13_0"
+      //   key="Content13_0"
+      //   dataSource={Content130DataSource}
+      //   isMobile={this.state.isMobile}
+      // />,
       <Teams0
         id="Teams0_0"
         key="Teams0_0"
@@ -82,12 +87,16 @@ export default class Home extends React.Component {
         dataSource={Content90DataSource}
         isMobile={this.state.isMobile}
       />,
-      <Feature3
-        id="Feature3_0"
-        key="Feature3_0"
-        dataSource={Feature30DataSource}
+      <SenseOfWorth 
+        key="SenseOfWorth12_1"
         isMobile={this.state.isMobile}
       />,
+      // <Feature3
+      //   id="Feature3_0"
+      //   key="Feature3_0"
+      //   dataSource={Feature30DataSource}
+      //   isMobile={this.state.isMobile}
+      // />,
       <Teams4
         id="Teams4_0"
         key="Teams4_0"

src/pages/About/less/content9.less

@@ -110,6 +110,9 @@
       display: block;
       min-height: 100px;
       margin-bottom: 54px;
+      &:last-child {
+        margin-bottom: 54px;
+      }
     }
     .image-wrapper,
     .text-wrapper {

src/pages/About/less/edit.less

@@ -40,10 +40,8 @@
   text-align: center;
 }
 #Teams0_0 .banner-anim-elem > .teams0-content-wrapper > .kps4mt2wxs-editor_css {
-  font-size: 36px;
-  font-weight: 900;
+  font-size: 44px;
   border-bottom-width: 50px;
-  margin: 24px auto 50px;
 }
 #Content13_0 .title-wrapper > .kpxe4ue36gk-editor_css {
   font-size: 36px;
@@ -105,6 +103,7 @@
 #Content9_0 .home-page > .title-wrapper > .kpxmutszulq-editor_css {
   color: rgb(250, 250, 250);
   margin: 0px 0;
+  font-weight: normal;
 }
 #Teams0_0 .kpxn9f9gel-editor_css {
   padding: 30px 20px 64px;
@@ -116,8 +115,7 @@
 }
 
 #Teams4_0 h1.dasdasdd-title_css {
-  font-size: 36px;
-  font-weight: bold;
+  font-size: 44px;
 }
 
 #Content13_0.kps4irbrinf-editor_css {
@@ -128,6 +126,84 @@
   // background-size: auto;
 }
 
+.senseOfWorth001{
+  width: 100%;
+  background-color: #32383d;
+  padding: 40px 0;
+  box-sizing: border-box;
+  .senseOfWorth_content{
+    max-width: 1200px;
+    margin: auto;
+
+    .senseOfWorth_enTitle{
+      color: #a16767;
+      text-align: center;
+    }
+    .senseOfWorth_title{
+      font-size: 44px;
+      font-weight: normal;
+      font-style: normal;
+      color: #fdfdfd;
+      padding: 15px 0px 50px;
+      text-align: center;
+    }
+    .senseOfWorth_nr{
+      display: flex;
+      justify-content: space-between;
+      &>div{
+        width: 24%;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        &:hover>img{
+          animation-duration: 4s;
+          animation-iteration-count: 1;
+          animation: flip 1s 0s ease both;
+          transition: all 0s .2s;
+        }
+        &>img{
+          width: 132px;
+          height: 100px;
+          animation-name: swing;
+          clear: both;
+        }
+        &>div{
+          margin-top: 20px;
+          &>p{
+            text-align: center;
+            color: #D3D3D3;
+            &~p{
+              color: #808080;
+              padding: 0 6%;
+              box-sizing: border-box;
+              text-align: center;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes swing {
+  20% {
+    transform: rotate(15deg);
+  }
+  40% {
+    transform: rotate(-10deg);
+  }
+  60% {
+    transform: rotate(5deg);
+  }
+  80% {
+    transform: rotate(-5deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
 @media screen and (max-width: 767px) {
   #Content13_0.kps4irbrinf-editor_css {
     background-image: url(../../../image/me.jpg);
@@ -135,4 +211,18 @@
     background-repeat: repeat;
     background-size: auto 100%;
   }
+
+  .senseOfWorth001{
+    .senseOfWorth_content{
+      .senseOfWorth_nr{
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        &>div{
+          width: 100%;
+          margin-bottom: 30px;
+        }
+      }
+    }
+  }
 }

src/pages/ContactUs/index.jsx

@@ -4,12 +4,11 @@ import React from 'react';
 import { enquireScreen } from 'enquire-js';
 
 import Nav0 from './Nav0';
-import Content13 from './Content13';
 import Footer0 from './Footer0';
+import Banner from '../../components/Banner';
 
 import {
   Nav00DataSource,
-  Content130DataSource,
   Footer00DataSource,
 } from './data.source';
 import './less/antMotionStyle.less';
@@ -58,11 +57,10 @@ export default class Home extends React.Component {
         dataSource={Nav00DataSource}
         isMobile={this.state.isMobile}
       />,
-      <Content13
-        id="Content13_0"
-        key="Content13_0"
-        dataSource={Content130DataSource}
-        isMobile={this.state.isMobile}
+      <Banner
+        key="Banner_43"
+        title="联系我们"
+        backUrl="https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/webpC1E95D2F6FAE481D9CB5D7B88FF58CC7.webp"
       />,
       <MyMap
         id="Content13_1"

src/pages/Home/AboutUs.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+function AboutUs(props) {
+    return <div className="aboutUs_001">
+        <div className="aboutUs_content">
+            <div className="content_left">
+                <h3 className="aboutUs_enTitle">ABOUT US <span className="aboutUs_line"></span></h3>
+                <h1 className="aboutUs_title">关于我们</h1>
+                <p className="aboutUs_txt">公司创始人从2010年大一开始在校创业，大学四年就已成功积累千万粉丝，2015年成立杭州趣程网络科技有限公司，抓住了移动互联网的发展机遇，通过自研智能数字营销服务平台及产品体系构建，深耕互联网流量获取与运营，经过长达十年的发展探索，成为国内领先的泛娱乐数字营销服务提供商之一。</p>
+                <div className="aboutUs_bts">
+                    <a href="/about">查看更多</a>
+                </div>
+            </div>
+            <div className="content_right">
+                <img src="https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/webpD6B49994EB1A48B49D895E3E1CA7B546.webp" />
+            </div>
+        </div>
+    </div>
+}
+
+export default AboutUs

src/pages/Home/Banner2.jsx

@@ -1,107 +1,51 @@
 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" />
-                  // <img src='@/image/img5.jpg' 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>
+
+const videos = ['https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/mp4D2BD31130FF64BDE8FE16411943EE96E.mp4', 'https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/mp4401C85BB09084B2EB823B337946E099C.mp4']
+function Banner(props) {
+  const { isMobile, ...prop } = props;
+  const [curr, setCurr] = React.useState(0)  // 播放的哪条视频
+
+  const refVideo = React.useRef(null)
+
+  const endenHandle = React.useCallback(()=>{
+    if(curr + 1 >= videos.length) {
+      setCurr(0)
+    }else{
+      setCurr(curr + 1)
+    }
+    console.log(refVideo);
+  },[curr, refVideo])
+
+  return (
+    <div {...prop} className="Banner2_0_sty">
+      <div className='home-header__video-bg'>
+        {/* <video id="pc-video" muted="muted" autoPlay playsInline="playsinline" loop="loop" controls={true} webkit-playsinline="webkit-playsinline" x5-playsinline="x5-playsinline">
+          <source src={videos[curr]} type="video/mp4" />
+        </video> */}
+        {
+          curr === 0 && <video id="pc-video1" muted="muted" ref={refVideo} autoPlay="autoplay" controls={true} onEnded={endenHandle}  webkit-playsinline="webkit-playsinline" x5-playsinline="x5-playsinline">
+            <source src={videos[curr]} type="video/mp4" />
+          </video>
+        }
+        {
+          curr === 1 && <video id="pc-video2" muted="muted" ref={refVideo} autoPlay="autoplay" controls={true} onEnded={endenHandle}  webkit-playsinline="webkit-playsinline" x5-playsinline="x5-playsinline">
+            <source src={videos[curr]} 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>
+        <p>激情青春敢为梦想，用科技创新赋予生活更多精彩</p>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
-export default Banner;
+export default Banner;

src/pages/Home/index.jsx

@@ -5,28 +5,18 @@ import { enquireScreen } from 'enquire-js';
 
 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 AboutUs from './AboutUs'
+import Introduction from '../Introduce/Introduction';
+import SenseOfWorth from '../About/SenseOfWorth';
 
 import Partners from '../../components/Partners'
 
 import {
   Nav00DataSource,
-  Banner20DataSource,
-  Content10DataSource,
   Footer10DataSource,
 } from './data.source';
 
-import {
-  Feature10DataSource,
-  Feature20DataSource,
-  Feature11DataSource,
-  Feature50DataSource
-} from '../Introduce/data.source';
-
 import './less/antMotionStyle.less';
 
 let isMobile;
@@ -127,40 +117,20 @@ export default class Home extends React.Component {
       <Banner2
         id="Banner2_0"
         key="Banner2_0"
-        dataSource={Banner20DataSource}
+        // dataSource={Banner20DataSource}
         isMobile={this.state.isMobile}
       />,
-      <Content1
-        id="Content1_0"
-        key="Content1_0"
-        dataSource={Content10DataSource}
+      <AboutUs
+        key="AboutUs11_0"
         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}
+      <SenseOfWorth 
+        key="SenseOfWorth12_1"
         isMobile={this.state.isMobile}
       />,
+      <Introduction
+        key="Introduction"
+      />,
       <Partners
         id="partners1_1"
         key="partners1_1"

src/pages/Home/less/edit.less

@@ -4,8 +4,7 @@
 }
 #Nav0_0.kps4649sxu-editor_css {
   position: sticky;
-}
-#Banner2_0 .banner-anim > .banner-anim-elem > .kps45irq7rp-editor_css {
+  z-index: 3;
 }
 #Banner2_0 .home-page > .banner2-text-wrapper > .kps6n8j5tn9-editor_css {
   display: block;
@@ -22,8 +21,6 @@
 #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;
@@ -41,3 +38,121 @@
 #Content1_0.kpxnn7fdgffv4ze-editor_css {
   margin: 30px 0;
 }
+
+
+.aboutUs_001{
+  width: 100%;
+  padding-top: 50px;
+  padding-bottom: 50px;
+  box-sizing: border-box;
+
+  .aboutUs_content{
+    max-width: 1200px;
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+    &>div{
+      width: 49%;
+      transition: all 0.3s ease 0s;
+      .aboutUs_enTitle{
+        color: rgb(161, 103, 103);
+        display: flex;
+        align-items: center;
+        &>.aboutUs_line{
+          display: inline-block;
+          width: 35px;
+          height: 2px;
+          background-color: #acacac;
+          margin-left: 12px;
+        }
+      }
+      .aboutUs_title{
+        padding: 15px 0px 30px;
+        box-sizing: border-box;
+        font-size: 44px;
+        font-weight: normal;
+        font-style: normal;
+        color: #000000;
+      }
+      .aboutUs_txt{
+        background-position: left top;
+        background-repeat: no-repeat;
+        margin-top: 0px;
+        margin-bottom: 0px;
+        padding: 0px;
+        border-radius: 0px;
+        display: inline-block;
+        max-width: 460px;
+        letter-spacing: 1px;
+        line-height: 28px;
+        font-size: 13px;
+      }
+      .aboutUs_bts{
+        margin-top: 50px;
+        &>a{
+          font-size: 13px;
+          letter-spacing: 2px;
+          text-indent: 2px;
+          padding: 17px 55px;
+          border-width: 1px;
+          border-color: #1890ff;
+          background-color: #1890ff;
+          color: rgb(255, 255, 255);
+          border-radius: 30px;
+          transition: all .2s ease-in-out;
+          &:hover{
+            border-color: rgb(0, 0, 0);
+            background-color: rgb(0, 0, 0);
+          }
+        }
+        
+      }
+      &.content_left{
+        padding-top: 30px;
+        box-sizing: border-box;
+      }
+      &.content_right{
+        animation: topBottom 0.7s 1 ease;
+        animation-iteration-count: infinite;
+        opacity: 1;
+        animation-duration: 16s;
+        animation-iteration-count: infinite;
+      }
+    }
+  }
+}
+
+@keyframes topBottom {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateY(-10px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateY(10px);
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .aboutUs_001{
+    padding-top: 10px;
+    padding-bottom: 20px;
+  
+    .aboutUs_content{
+      justify-content: center;
+      flex-wrap: wrap;
+      margin: 0 20px;
+      &>div{
+        width: 100%;
+
+        &.content_right{
+          margin-top: 30px;
+          &>img{
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/Introduce/Introduction.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+
+function Introduction(props) {
+    return <div className="introduction001">
+        <div className="introduction_content">
+            <h3 className='introduction_enTitle'>INTRODUCTION</h3>
+            <h1 className='introduction_title'>业务介绍</h1>
+            <div className="introduction_ne">
+                <div>
+                    <div className="ne_top">
+                        <img width={68} height={77} src="https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/webpFDE11B7E7E664D40BAC2FA33270C98DA.webp" />
+                        <div>
+                            <span>在线</span><br />
+                            <span>阅读</span>
+                        </div>
+                    </div>
+                    <div className="ne_bottom">通过数字化技术中台，大数据融合，广告创意策划，为在线阅读分发平台提供全渠道精准营销服务，赋能平台增长，共同打造正版在线阅读行业生态</div>
+                </div>
+                <div>
+                    <div className="ne_top">
+                        <img width={68} height={77} src="https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/webp1E26EA8981CF4FFA8426289DF9DDA207.webp" />
+                        <div>
+                            <span>智能营销</span><br />
+                            <span>服务平台</span>
+                        </div>
+                    </div>
+                    <div className="ne_bottom">通过多维度智能打标，输出立体客户画像，并进行全生命周期管理，精细化运营提升客户价值，可视化创建营销流程，人工智能自动分发，有效释放企业运营能力。</div>
+                </div>
+                <div>
+                    <div className="ne_top">
+                        <img width={68} height={77} src="https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/webp16187B4AD25A46FEA3B06DE52823A949.webp" />
+                        <div>
+                            <span>内容</span><br />
+                            <span>电商</span>
+                        </div>
+                    </div>
+                    <div className="ne_bottom">透过优质的内容传播，进而引发兴趣和购买，通过新兴媒介手段，直播、短视频、小视频等。</div>
+                </div>
+            </div>
+        </div>
+    </div>
+}
+
+export default Introduction

src/pages/Introduce/index.jsx

@@ -4,24 +4,17 @@ import React from 'react';
 import { enquireScreen } from 'enquire-js';
 
 import Nav0 from './Nav0';
-import Content13 from './Content13';
-import Feature1 from './Feature1';
-import Feature2 from './Feature2';
 import Footer1 from './Footer1';
-import Feature5 from './Feature5';
 
 import {
   Nav00DataSource,
-  Content130DataSource,
-  Feature10DataSource,
-  Feature20DataSource,
-  Feature11DataSource,
   Footer10DataSource,
-  Feature50DataSource
 } from './data.source';
 import './less/antMotionStyle.less';
 
 import Partners from '../../components/Partners'
+import Banner from '../../components/Banner';
+import Introduction from './Introduction'
 
 let isMobile;
 enquireScreen((b) => {
@@ -65,35 +58,13 @@ export default class Home extends React.Component {
         dataSource={Nav00DataSource}
         isMobile={this.state.isMobile}
       />,
-      <Content13
-        id="Content13_0"
-        key="Content13_0"
-        dataSource={Content130DataSource}
-        isMobile={this.state.isMobile}
+      <Banner
+        key="Banner_123"
+        title="业务介绍"
+        backUrl="https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/webpEC6C61DF34B343BE9C92CCAB60CA3BA6.webp"
       />,
-      // <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}
+      <Introduction
+        key="Introduction"
       />,
       <Partners
         id="partners1_1"

src/pages/Introduce/less/edit.less

@@ -51,9 +51,102 @@
   background-color: #fbfbfb;
 }
 
+.introduction001{
+  width: 100%;
+  background-image: url(https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/webpA0C47512959046158EB02981B8BD7901.webp);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: scroll;
+  background-position: center center;
+  padding-top: 14vh;
+  padding-bottom: 14vh;
+  box-sizing: border-box;
+  .introduction_content{
+    max-width: 1200px;
+    margin: auto;
+    .introduction_enTitle{
+      color: rgb(161, 103, 103);
+      text-align: center;
+    }
+    .introduction_title{
+      font-size: 44px;
+      font-weight: normal;
+      font-style: normal;
+      color: #020202;
+      padding: 15px 0px 50px;
+      text-align: center;
+    }
+    .introduction_ne{
+      display: flex;
+      justify-content: space-between;
+      &>div{
+        width: 32%;
+        border-radius: 10px;
+        background-color: #fafafa;
+        padding-left: 45px;
+        padding-right: 45px;
+        padding-top: 8vh;
+        padding-bottom: 8vh;
+        transition: all 0.3s ease 0s;
+        border-color: #ffffff;
+        &:hover{
+          border-top: 2px solid rgb(226, 226, 226) !important;
+          border-bottom: 2px solid rgb(226, 226, 226) !important;
+          border-left: 2px solid rgb(226, 226, 226) !important;
+          border-right: 2px solid rgb(226, 226, 226) !important;
+        }
+        .ne_top{
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          &>div{
+            font-family: 微软雅黑;
+            font-size: 20px;
+            font-weight: bold;
+            font-style: normal;
+            color: #000000;
+            padding: 0 0 0 25px;
+            box-sizing: border-box;
+          }
+        }
+        .ne_bottom{
+          line-height: 28px;
+          background-position: left top;
+          background-repeat: no-repeat;
+          margin-top: 0;
+          margin-bottom: 0;
+          padding-top: 24px;
+          padding-bottom: 0;
+          padding-right: 3px;
+          padding-left: 3px;
+          border-radius: 0px;
+          font-size: 13px;
+        }
+      }
+    }
+  }
+}
+
 @media screen and (max-width: 767px) {
   #Content13_0.kps6irbrinf-editor_css {
     background-image: url('../../../image//img3phone.jpg');
     background-size: auto;
   }
+
+  .introduction001{
+    padding-top: 8vh;
+    padding-bottom: 8vh;
+    .introduction_content{
+      margin: 0 20px;
+      .introduction_ne{
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        &>div{
+          margin: 20px 0;
+          width: 100%;
+        }
+      }
+    }
+  }
 }

src/pages/StaffStyle/Activities.jsx

@@ -40,7 +40,8 @@ class Activities extends React.Component {
         return (
             <div>
                 <QueueAnim type="bottom" className={`${this.props.className}-title`}>
-                    <h1 key="h1">社团活动</h1>
+                    <h3 style={{color: '#a16767'}}>COMMUNITY ACTIVITIES</h3>
+                    <h1 key="h1" style={{marginTop: 15, fontSize: 44, fontWeight: 'normal'}}>社团活动</h1>
                     <p>公司有羽毛球社，摄影社，兵乓球社等各种社团，不定期举办比赛，各种奖品等着大家</p>
                 </QueueAnim>
                 <QueueAnim

src/pages/StaffStyle/Banner2.jsx

@@ -2,7 +2,7 @@ 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']
+const videos = ['https://zx-oss-dev.oss-cn-hangzhou.aliyuncs.com/mp42B147757C7064531843719E3511F6C34.mp4', 'http://questnet.cn/image/2.mp4', 'http://questnet.cn/image/3.mp4']
 function Banner(props) {
   const { isMobile, ...prop } = props;
   const [curr, setCurr] = React.useState(0)  // 播放的哪条视频

src/pages/StaffStyle/Birthday.jsx

@@ -39,7 +39,8 @@ class PicDetailsDemo extends React.Component {
         return (
             <div>
                 <QueueAnim type="bottom" className={`${this.props.className}-title`}>
-                    <h1 key="h1">员工生日会</h1>
+                    <h3 style={{color: '#a16767'}}>BIRTHDAY PARTY</h3>
+                    <h1 key="h1" style={{marginTop: 15, fontSize: 44, fontWeight: 'normal'}}>员工生日会</h1>
                     <p>公司每月月底会给当月员工举办生日会</p>
                 </QueueAnim>
                 <QueueAnim

src/pages/StaffStyle/index.jsx

@@ -71,7 +71,8 @@ export default class Home extends React.Component {
       />,
       <div id="sr" key="sr">
         <div>
-          <h1>员工活动</h1>
+          <h3 style={{color: '#a16767', textAlign: 'center'}}>ACTIVITY</h3>
+          <h1 style={{fontSize: 44, fontWeight: 'normal', marginTop: 15}}>员工活动</h1>
           <div>
             <div>
               <img src={require('../../image/1.jpg')} />

src/pages/StaffStyle/less/banner2.less

@@ -34,10 +34,18 @@
     z-index: 2;
     top: 50%;
     left: 50%;
-    transform: translate(-50, -50%);
+    transform: translate(-50%, -50%);
     &>h1{
-      font-size: 40px;
+      font-size: 76px;
       color: #fff;
+      text-align: center;
+    }
+    &>p{
+      font-size: 18px;
+      color: #fff;
+      text-align: center;
+      margin-top: 30px;
+      letter-spacing: 4px;
     }
   }
 }
@@ -63,5 +71,25 @@
         left: 0;
       }
     }
+    .home-header-content{
+      &>h1{
+        font-size: 46px;
+      }
+      &>p{
+        font-size: 18px;
+      }
+    }
   }
 }
+@media screen and (max-width: 767px) {
+  .@{banner2} {
+    .home-header-content{
+      &>h1{
+        font-size: 32px;
+      }
+      &>p{
+        font-size: 16px;
+      }
+    }
+  }
+}