test

.drone.yml

@@ -0,0 +1,46 @@
+workspace:
+   base: /project
+   path: src/demo
+
+branches: [ master,develop,uat ]
+
+
+pipeline:  
+
+  install:
+    image: node:16-alpine
+    commands:
+      - yarn install # 也可以使用 npm install
+
+  build:
+    image: node:16-alpine
+    commands:
+      - yarn run build
+    when:
+      event: push
+      branch: develop
+
+  docker-dev:
+    image: plugins/docker
+    repo: registry.cn-shenzhen.aliyuncs.com/ax-stor/ax-bkb-seller
+    registry: registry.cn-shenzhen.aliyuncs.com
+    use_cache: true
+    dockerfile: Dockerfile
+    secrets: [ docker_username, docker_password ]
+    tags: bindex-web
+    when:
+      branch: develop
+      
+  deploy-dev:
+    image: appleboy/drone-ssh
+    host: 1.92.109.79
+    username: root
+    password: 
+      from_secret: ssh_password
+    port: 22 # 可选，指定 SSH 端口，默认为 22
+    script:
+      - docker rm -f bindex-web
+      - docker pull registry.cn-shenzhen.aliyuncs.com/ax-stor/ax-bkb-seller:bindex-web
+      - docker run --name=bindex-web -p 30104:83 -d registry.cn-shenzhen.aliyuncs.com/ax-stor/ax-bkb-seller:bindex-web
+    when:
+      branch: develop

.gitignore

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

.umirc.js

@@ -0,0 +1,29 @@
+
+export default {
+  hash: true,
+  // exportStatic: {
+  //   htmlSuffix: true,
+  //   dynamicRoot: true,
+  // },
+  title:"长沙一个地球网络科技有限公司",
+  antd: {},
+  targets: {
+    ie: 11,
+  },
+  // 路由
+  routes: [
+    {
+      exact: true,
+      path: '/',
+      redirect: '/index',
+    },
+    {
+      path: '/index',
+      component: '@/pages/Index',
+    },
+    {
+      path: '/download',
+      component: '@/pages/Download',
+    },
+  ],
+}

Dockerfile

@@ -0,0 +1,8 @@
+FROM registry.cn-shanghai.aliyuncs.com/lj-go/nginx
+LABEL maintainer "wenwu"
+
+WORKDIR /react
+COPY . /react
+COPY dist /usr/share/nginx/html/
+COPY nginxDev.conf /etc/nginx/conf.d/default.conf
+EXPOSE 83

README.md

@@ -1,3 +0,0 @@
-# bkb-landingpage
-
-bkb 首页

default.conf

@@ -0,0 +1,9 @@
+server {
+    listen       80;
+    server_name  _;
+    root /data/app;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

nginxDev.conf

@@ -0,0 +1,28 @@
+server {
+    listen       83;
+    root         /usr/share/nginx/html/;
+    include /etc/nginx/default.d/*.conf;
+
+
+    location / {
+      index index.html index.htm;
+      error_page 405 =200 /index.html;
+      try_files $uri $uri/ /index.html;
+    }
+
+    location /api/ {
+      proxy_pass    http://1.92.109.79:30201/;
+    }
+
+    location /minio/ {
+      proxy_pass    https://ax-api.sumweal.com/minio/;
+    }
+
+    error_page 404 /404.html;
+        location = /40x.html {
+    }
+
+    error_page 500 502 503 504 /50x.html;
+        location = /50x.html {
+    }
+}

package.json

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

src/Home/Banner0.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+import QueueAnim from 'rc-queue-anim';
+import TweenOne from 'rc-tween-one';
+import { isImg } from './utils';
+
+class Banner extends React.PureComponent {
+  render() {
+    const { ...currentProps } = this.props;
+    const { dataSource } = currentProps;
+    delete currentProps.dataSource;
+    delete currentProps.isMobile;
+    return (
+      <div {...currentProps} {...dataSource.wrapper}>
+        <QueueAnim
+          key="QueueAnim"
+          type={['bottom', 'top']}
+          delay={200}
+          {...dataSource.textWrapper}
+        >
+
+        </QueueAnim>
+        <TweenOne
+          animation={{
+            y: '-=20',
+            yoyo: true,
+            repeat: -1,
+            duration: 1000,
+          }}
+          className="banner0-icon"
+          key="icon"
+        >
+          {/* <DownOutlined /> */}
+        </TweenOne>
+      </div>
+    );
+  }
+}
+export default Banner;

src/Home/Banner1.jsx

@@ -0,0 +1,75 @@
+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;
+class Banner extends React.PureComponent {
+  render() {
+    const { ...props } = this.props;
+    const { dataSource } = 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, textWrapper, title, content, button } = item;
+      return (
+        <Element key={i.toString()} {...elem} prefixCls={elemClassName}>
+          <BgElement key="bg" {...bg} />
+          <QueueAnim
+            type={['bottom', 'top']}
+            delay={200}
+            key="text"
+            {...textWrapper}
+          >
+            {/* <div key="logo" {...title}>
+              {typeof title.children === 'string' &&
+                title.children.match(isImg) ? (
+                <img src={title.children} width="100%" alt="img" />
+              ) : (
+                title.children
+              )}
+            </div> */}
+          </QueueAnim>
+        </Element>
+      );
+    });
+    return (
+      <div {...props} {...dataSource.wrapper}>
+        <TweenOneGroup
+          key="bannerGroup"
+          enter={{ opacity: 0, type: 'from' }}
+          leave={{ opacity: 0 }}
+          component=""
+        >
+          <div className="banner1-wrapper" key="wrapper">
+            <BannerAnim key="BannerAnim" {...dataSource.BannerAnim}>
+              {childrenToRender}
+            </BannerAnim>
+          </div>
+        </TweenOneGroup>
+        <TweenOne
+          animation={{
+            y: '-=20',
+            yoyo: true,
+            repeat: -1,
+            duration: 1000,
+          }}
+          className="banner1-icon"
+          style={{ bottom: 40 }}
+          key="icon"
+        >
+          {/* <DownOutlined /> */}
+        </TweenOne>
+      </div>
+    );
+  }
+}
+
+export default Banner;

src/Home/Content1.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import QueueAnim from 'rc-queue-anim';
+import TweenOne from 'rc-tween-one';
+import { Row, Col } from 'antd';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import styles from './customer.less';
+
+function Content1(props) {
+  const { ...tagProps } = props;
+  const { dataSource, isMobile } = tagProps;
+  delete tagProps.dataSource;
+  delete tagProps.isMobile;
+  const animType = {
+    queue: isMobile ? 'bottom' : 'right',
+    one: isMobile
+      ? {
+        scaleY: '+=0.3',
+        opacity: 0,
+        type: 'from',
+        ease: 'easeOutQuad',
+      }
+      : {
+        x: '-=30',
+        opacity: 0,
+        type: 'from',
+        ease: 'easeOutQuad',
+      },
+  };
+  return (
+    <div className={styles.bg1}>
+      <div {...tagProps} {...dataSource.wrapper}>
+        <OverPack {...dataSource.OverPack} component={Row}>
+          <TweenOne
+            key="img"
+            animation={animType.one}
+            resetStyle
+            {...dataSource.imgWrapper}
+            component={Col}
+            componentProps={{
+              md: dataSource.imgWrapper.md,
+              xs: dataSource.imgWrapper.xs,
+            }}
+          >
+            <span {...dataSource.img}>
+              <img src={dataSource.img.children} width="100%" alt="img" />
+            </span>
+          </TweenOne>
+          <QueueAnim
+            key="text"
+            type={animType.queue}
+            leaveReverse
+            ease={['easeOutQuad', 'easeInQuad']}
+            {...dataSource.textWrapper}
+            component={Col}
+            componentProps={{
+              md: dataSource.textWrapper.md,
+              xs: dataSource.textWrapper.xs,
+            }}
+          >
+            <h2 key="h1" {...dataSource.title}>
+              {dataSource.title.children}
+            </h2>
+            <div key="p" {...dataSource.content}>
+              {dataSource.content.children}
+            </div>
+          </QueueAnim>
+        </OverPack>
+      </div>
+    </div>
+  );
+}
+
+export default Content1;

src/Home/Feature1.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import QueueAnim from 'rc-queue-anim';
+import TweenOne from 'rc-tween-one';
+import { Row, Col } from 'antd';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import styles from "./customer.less"
+
+function Content1(props) {
+  const { ...tagProps } = props;
+  const { dataSource, isMobile } = tagProps;
+  delete tagProps.dataSource;
+  delete tagProps.isMobile;
+  const animType = {
+    queue: isMobile ? 'bottom' : 'right',
+    one: isMobile
+      ? {
+        scaleY: '+=0.3',
+        opacity: 0,
+        type: 'from',
+        ease: 'easeOutQuad',
+      }
+      : {
+        x: '-=30',
+        opacity: 0,
+        type: 'from',
+        ease: 'easeOutQuad',
+      },
+  };
+  return (
+    <div className={styles.bg3}>
+      <div {...tagProps} {...dataSource.wrapper}>
+        <OverPack {...dataSource.OverPack} component={Row}>
+          <TweenOne
+            key="img"
+            animation={animType.one}
+            resetStyle
+            {...dataSource.imgWrapper}
+            component={Col}
+            componentProps={{
+              md: dataSource.imgWrapper.md,
+              xs: dataSource.imgWrapper.xs,
+            }}
+          >
+            <span {...dataSource.img}>
+              <img src={dataSource.img.children} width="100%" alt="img" />
+            </span>
+          </TweenOne>
+          <QueueAnim
+            key="text"
+            type={animType.queue}
+            leaveReverse
+            ease={['easeOutQuad', 'easeInQuad']}
+            {...dataSource.textWrapper}
+            component={Col}
+            componentProps={{
+              md: dataSource.textWrapper.md,
+              xs: dataSource.textWrapper.xs,
+            }}
+          >
+            <h2 key="h1" {...dataSource.title}>
+              {dataSource.title.children}
+            </h2>
+            <div key="p" {...dataSource.content} style={{ position: 'relative', paddingLeft: 10 }}>
+              <span className={styles.circle} />
+              {dataSource.content.children}
+            </div>
+            <div key="p1" style={{ marginTop: 10, position: 'relative', paddingLeft: 10 }}>
+              <span className={styles.circle} />
+              {dataSource.content.children1}
+            </div>
+          </QueueAnim>
+        </OverPack>
+      </div>
+    </div>
+
+  );
+}
+
+export default Content1;

src/Home/Feature2.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import QueueAnim from 'rc-queue-anim';
+import TweenOne from 'rc-tween-one';
+import { Row, Col } from 'antd';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import styles from './customer.less';
+
+
+function Content2(props) {
+  const { ...tagProps } = props;
+  const { dataSource, isMobile } = tagProps;
+  delete tagProps.dataSource;
+  delete tagProps.isMobile;
+  const animType = {
+    queue: isMobile ? 'bottom' : 'left',
+    one: isMobile
+      ? {
+        scaleY: '+=0.3',
+        opacity: 0,
+        type: 'from',
+        ease: 'easeOutQuad',
+      }
+      : {
+        x: '+=30',
+        opacity: 0,
+        type: 'from',
+        ease: 'easeOutQuad',
+      },
+  };
+  const img = (
+    <TweenOne
+      key="img"
+      animation={animType.one}
+      resetStyle
+      {...dataSource.imgWrapper}
+      component={Col}
+      componentProps={{
+        md: dataSource.imgWrapper.md,
+        xs: dataSource.imgWrapper.xs,
+      }}
+    >
+      <span {...dataSource.img}>
+        <img src={dataSource.img.children} width="100%" alt="img" />
+      </span>
+    </TweenOne>
+  );
+  return (
+    <div className={styles.bg2}>
+      <div {...tagProps} {...dataSource.wrapper}>
+        <OverPack {...dataSource.OverPack} component={Row}>
+          {isMobile && img}
+          <QueueAnim
+            type={animType.queue}
+            key="text"
+            leaveReverse
+            ease={['easeOutCubic', 'easeInCubic']}
+            {...dataSource.textWrapper}
+            component={Col}
+            componentProps={{
+              md: dataSource.textWrapper.md,
+              xs: dataSource.textWrapper.xs,
+            }}
+          >
+            <h2 key="h1" {...dataSource.title}>
+              {dataSource.title.children}
+            </h2>
+            <div key="p" {...dataSource.content}>
+              {dataSource.content.children}
+            </div>
+          </QueueAnim>
+          {!isMobile && img}
+        </OverPack>
+      </div>
+    </div>
+
+  );
+}
+
+export default Content2;

src/Home/Footer0.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import TweenOne from 'rc-tween-one';
+import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+
+class Footer extends React.PureComponent {
+  render() {
+    const { ...props } = this.props;
+    const { dataSource } = props;
+    delete props.dataSource;
+    delete props.isMobile;
+    return (
+      <div {...props} {...dataSource.wrapper}>
+        <OverPack {...dataSource.OverPack}>
+          <TweenOne
+            animation={{ y: '+=30', opacity: 0, type: 'from' }}
+            key="footer"
+            {...dataSource.copyright}
+          >
+            {dataSource.copyright.children}
+          </TweenOne>
+        </OverPack>
+      </div>
+    );
+  }
+}
+
+export default Footer;

src/Home/customer.less

@@ -0,0 +1,64 @@
+.circle {
+  border-radius: 100%;
+  width: 8px;
+  height: 8px;
+  background-color: #58b0bc;
+  display: inline-block;
+  position: absolute;
+  left: 0px;
+  top: 5px;
+}
+
+.banner0 {
+  img {
+    width: 100%;
+    height: auto;
+  }
+}
+
+.banner1 {
+  img {
+    width: 100%;
+    height: auto;
+  }
+}
+.banner2 {
+  img {
+    width: 100%;
+    height: auto;
+  }
+}
+
+.bg1 {
+  background-image: url(./images/bg1.png);
+  background-size: cover;
+  & > div {
+    height: 500px;
+    padding-top: 100px;
+    padding-bottom: 100px;
+    box-sizing: content-box;
+  }
+}
+
+.bg2 {
+  background-image: url(./images/bg2.png);
+  background-size: cover;
+  background-color: black;
+  & > div {
+    height: 500px;
+    padding-top: 100px;
+    padding-bottom: 100px;
+    box-sizing: content-box;
+  }
+}
+
+.bg3 {
+  background-image: url(./images/bg3.png);
+  background-size: cover;
+  & > div {
+    height: 500px;
+    padding-top: 100px;
+    padding-bottom: 100px;
+    box-sizing: content-box;
+  }
+}

src/Home/data.source.js

@@ -0,0 +1,156 @@
+import React from 'react';
+import icon1Image from './images/icon1.png';
+import icon2Image from './images/icon2.png';
+import icon3Image from './images/icon3.png';
+
+
+export const Banner10DataSource = {
+  wrapper: { className: 'banner1' },
+  BannerAnim: {
+    children: [
+      {
+        name: 'elem0',
+        BannerElement: { className: 'banner-user-elem' },
+        textWrapper: { className: 'banner1-text-wrapper' },
+        bg: {
+          className: 'bg bg0',
+          style: { 'background-position': 'top' },
+          onClick: () => {
+            window.location.href = 'https://seller-dev.bkbackground.com/login';
+          },
+        },
+        title: {
+          className: 'banner1-title',
+          children:
+            'https://zos.alipayobjects.com/rmsportal/HqnZZjBjWRbjyMr.png',
+        },
+        content: {
+          className: 'banner1-content',
+          children: '一个高效的页面动画解决方案',
+        },
+        button: { className: 'banner1-button', children: 'Learn More' },
+      },
+      {
+        name: 'elem1',
+        BannerElement: { className: 'banner-user-elem' },
+        textWrapper: { className: 'banner1-text-wrapper' },
+        bg: {
+          className: 'bg bg1',
+          style: { 'background-position': 'top' },
+        },
+        title: {
+          className: 'banner1-title',
+          children:
+            'https://zos.alipayobjects.com/rmsportal/HqnZZjBjWRbjyMr.png',
+        },
+        content: {
+          className: 'banner1-content',
+          children: '一个高效的页面动画解决方案',
+        },
+        button: { className: 'banner1-button', children: 'Learn More' },
+      },
+    ],
+  },
+};
+export const Banner02DataSource = {
+  wrapper: { className: 'banner0' },
+  textWrapper: { className: 'banner0-text-wrapper' },
+  title: {
+    className: 'banner0-title',
+    children: 'https://zos.alipayobjects.com/rmsportal/HqnZZjBjWRbjyMr.png',
+  },
+  content: {
+    className: 'banner0-content',
+    children: '',
+  },
+  button: { className: 'banner0-button', children: 'Learn More' },
+};
+export const Banner00DataSource = {
+  wrapper: { className: 'banner0' },
+  textWrapper: { className: 'banner0-text-wrapper' },
+  title: {
+    className: 'banner0-title',
+    children: 'https://zos.alipayobjects.com/rmsportal/HqnZZjBjWRbjyMr.png',
+  },
+  content: {
+    className: 'banner0-content',
+    children: '',
+  },
+  button: { className: 'banner0-button', children: 'Learn More' },
+};
+export const Banner01DataSource = {
+  wrapper: { className: 'banner0' },
+  textWrapper: { className: 'banner0-text-wrapper' },
+  title: {
+    className: 'banner0-title',
+    children: 'https://zos.alipayobjects.com/rmsportal/HqnZZjBjWRbjyMr.png',
+  },
+  content: {
+    className: 'banner0-content',
+    children: '',
+  },
+  button: { className: 'banner0-button', children: 'Learn More' },
+};
+export const Content10DataSource = {
+  wrapper: { className: 'home-page-wrapper content1-wrapper' },
+  OverPack: { className: 'home-page content1', playScale: 0.3 },
+  imgWrapper: { className: 'content1-img', md: 12, xs: 24 },
+  img: {
+    children: icon1Image,
+  },
+  textWrapper: { className: 'content1-text', md: 12, xs: 24 },
+  title: { className: 'content1-title', children: '区块链智能合约系统' },
+  content: {
+    className: 'content1-content',
+    children:
+      '利用区块链智能合约系统构建网红和供应链的分账模式，打破信任壁垒，完成去中心化的导流销售分账机制',
+  },
+};
+export const Feature20DataSource = {
+  wrapper: { className: 'home-page-wrapper content2-wrapper' },
+  OverPack: { className: 'home-page content2', playScale: 0.3 },
+  imgWrapper: { className: 'content2-img', md: 12, xs: 24 },
+  img: {
+    children: icon2Image,
+  },
+  textWrapper: { className: 'content2-text', md: 12, xs: 24 },
+  title: { className: 'content2-title', children: '智能内容生产', style: { color: '#FFFFFF' } },
+  content: {
+    className: 'content2-content',
+    style: { color: '#999999' },
+    children:
+      '有效接入人工智能等产品功能，在网红内容生产和品牌独立站构建体系中降本增效，让网红可以更轻松生产优质内容为产品导流',
+  },
+};
+export const Feature10DataSource = {
+  wrapper: { className: 'home-page-wrapper content1-wrapper' },
+  OverPack: { className: 'home-page content1', playScale: 0.3 },
+  imgWrapper: { className: 'content1-img', md: 12, xs: 24 },
+  img: {
+    children: icon3Image,
+  },
+  textWrapper: { className: 'content1-text', md: 12, xs: 24 },
+  title: { className: 'content1-title', children: '快速构建独立站私域流量' },
+  content: {
+    className: 'content1-content',
+    children:
+      '有别于现在主流的电商平台中心化的站内流量体系，BKB可以无上限地为品牌方提供一键生成产品和品牌的独立站',
+    children1: '导入全球自媒体平台流量帮助建品牌方建立基于独立站的私域流量体系'
+  },
+};
+
+export const Footer00DataSource = {
+  wrapper: { className: 'home-page-wrapper footer0-wrapper' },
+  OverPack: { className: 'home-page footer0', playScale: 0.05 },
+  copyright: {
+    className: 'copyright',
+    children: (
+      <>
+        <span style={{paddingRight: 20, color:"white"}}>长沙一个地球网络科技有限公司</span>
+        <span>
+          <a href="https://beian.miit.gov.cn/#/Integrated/index">湘ICP备2022024531号</a>
+        </span>
+      </>
+    ),
+  },
+};

src/Home/documentation.md

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

src/Home/index.jsx

@@ -0,0 +1,119 @@
+/* eslint no-undef: 0 */
+/* eslint arrow-parens: 0 */
+import React from 'react';
+import { enquireScreen } from 'enquire-js';
+
+import Banner1 from './Banner1';
+import Banner0 from './Banner0';
+import Content1 from './Content1';
+import Feature2 from './Feature2';
+import Feature1 from './Feature1';
+import styles from './customer.less'
+import content1Image from './less/content1.png'
+import content2Image from './less/content2.png'
+import content3Image from './less/content3.png'
+import Footer0 from './Footer0';
+
+
+import {
+  Footer00DataSource,
+  Banner10DataSource,
+  Banner02DataSource,
+  Banner00DataSource,
+  Banner01DataSource,
+  Content10DataSource,
+  Feature20DataSource,
+  Feature10DataSource,
+} 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 = [
+      <Banner1
+        id="Banner1_0"
+        key="Banner1_0"
+        dataSource={Banner10DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <div className={styles.banner0}>
+        <img src={content1Image} alt="" />
+      </div>,
+      <div className={styles.banner1}>
+        <img src={content2Image} alt="" />
+      </div>,
+      <div className={styles.banner2}>
+        <img src={content3Image} alt="" />
+      </div>,
+      <Content1
+        id="Content1_0"
+        key="Content1_0"
+        dataSource={Content10DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <Feature2
+        id="Feature2_0"
+        key="Feature2_0"
+        dataSource={Feature20DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <Feature1
+        id="Feature1_0"
+        key="Feature1_0"
+        dataSource={Feature10DataSource}
+        isMobile={this.state.isMobile}
+      />,
+      <Footer0
+        id="Footer0_0"
+        key="Footer0_0"
+        dataSource={Footer00DataSource}
+        isMobile={this.state.isMobile}
+      />,
+    ];
+    return (
+      <div
+        className="templates-wrapper"
+        ref={(d) => {
+          this.dom = d;
+        }}
+      >
+        {/* 如果不是 dva 2.0 替换成 {children} start */}
+        {this.state.show && children}
+        {/* 如果不是 dva 2.0 替换成 {children} end */}
+      </div>
+    );
+  }
+}

src/Home/less/antMotionStyle.less

@@ -0,0 +1,10 @@
+@import "./common.less";
+@import "./custom.less";
+@import "./content.less";
+@import "./banner1.less";
+@import "./banner0.less";
+@import "./content1.less";
+@import "./feature2.less";
+@import "./feature1.less";
+@import "./edit.less";
+@import "./footer0.less";

src/Home/less/banner0.less

@@ -0,0 +1,84 @@
+@banner0: banner0;
+.@{banner0} {
+  // 如果在第一屏且导航位置为 relative, 一屏为 height: calc(~"100vh - 64px");
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  text-align: center;
+  border-color: #666;
+  // background-image: url("https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg");
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: center;
+  & &-text-wrapper {
+    display: inline-block;
+    position: absolute;
+    top: 20%;
+    margin: auto;
+    left: 0;
+    right: 0;
+    font-size: 14px;
+    color: @template-text-color-light;
+    width: 550px;
+    > .queue-anim-leaving {
+      position: relative !important;
+    }
+  }
+  & &-title {
+    width: 350px;
+    left: 30px;
+    min-height: 60px;
+    margin: auto;
+    display: inline-block;
+    font-size: 40px;
+    position: relative;
+  }
+  & &-content {
+    margin-bottom: 20px;
+    word-wrap: break-word;
+    min-height: 24px;
+  }
+  & &-button {
+    border: 1px solid #fff;
+    color: #fff;
+    background: transparent;
+    box-shadow: 0 0 0 transparent;
+    font-size: 16px;
+    height: 40px;
+    transition: background 0.45s @ease-out, box-shadow 0.45s @ease-out;
+    &:hover {
+      color: #fff;
+      border-color: #fff;
+      background: rgba(255, 255, 255, 0.1);
+      box-shadow: 0 0 10px rgba(50, 250, 255, 0.75);
+    }
+    &:focus {
+      color: #fff;
+      border-color: #fff;
+    }
+    &.queue-anim-leaving {
+      width: auto;
+    }
+  }
+  & &-icon {
+    bottom: 20px;
+    font-size: 24px;
+    position: absolute;
+    left: 50%;
+    margin-left: -12px;
+    color: @template-text-color-light;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .@{banner0} {
+    background-attachment: inherit;
+    & &-text-wrapper {
+      width: 90%;
+    }
+    & &-title {
+      width: 90%;
+      left: 0;
+    }
+  }
+}

src/Home/less/banner1.less

@@ -0,0 +1,126 @@
+@banner1: banner1;
+.@{banner1} {
+  // 如果在第一屏且导航位置为 relative, 一屏为 height: calc(~"100vh - 64px");
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  border-color: #666;
+  background: #fff;
+  &-wrapper,
+  .banner-anim {
+    height: 100%;
+  }
+  & .queue-anim-leaving {
+    position: relative !important;
+  }
+  .banner-user-elem {
+    height: 100%;
+    color: #fff;
+    position: relative;
+    overflow: hidden;
+  }
+  .bg0 {
+    background: url("./banner1.png") center;
+  }
+  .bg1 {
+    background: url("./banner2.png") center;
+  }
+  .bg {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    background-size: cover;
+  }
+  .banner-user-elem .banner-user-title {
+    font-size: 22px;
+    top: 40%;
+  }
+  .banner-user-elem .banner-user-text {
+    top: 40%;
+  }
+  & &-text-wrapper {
+    display: block;
+    position: relative;
+    top: 20%;
+    left: 0;
+    right: 0;
+    margin: auto;
+    font-size: 14px;
+    color: @template-text-color-light;
+    width: 550px;
+    text-align: center;
+  }
+  & &-title {
+    width: 350px;
+    left: 30px;
+    margin: auto;
+    display: inline-block;
+    font-size: 40px;
+    position: relative;
+  }
+  & &-content {
+    margin-bottom: 20px;
+    word-wrap: break-word;
+  }
+  & &-button {
+    border: 1px solid #fff;
+    color: #fff;
+    background: transparent;
+    box-shadow: 0 0 0 transparent;
+    transition: background 0.45s @ease-out, box-shadow 0.45s @ease-out;
+    line-height: 36px;
+    font-size: 16px;
+    height: 36px;
+    & span {
+      text-shadow: 0 0 0 rgba(0, 0, 0, 0);
+      transition: text-shadow 0.45s @ease-out;
+    }
+    &:hover {
+      color: #fff;
+      border-color: #fff;
+      background: rgba(255, 255, 255, 0.1);
+      box-shadow: 0 0 10px rgba(50, 250, 255, 0.75);
+      & span {
+        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
+      }
+    }
+
+    &.queue-anim-leaving {
+      width: auto;
+    }
+  }
+  & &-icon {
+    bottom: 20px;
+    font-size: 24px;
+    position: absolute;
+    z-index: 10;
+    left: 50%;
+    margin-left: -12px;
+    color: @template-text-color-light;
+  }
+}
+
+.banner-anim-thumb-default span {
+  width: 10px;
+  height: 10px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.5);
+}
+
+@media screen and (max-width: 767px) {
+  .@{banner1} {
+    & &-text-wrapper {
+      width: 90%;
+      .@{banner1}-title {
+        width: 90%;
+        left: 0;
+      }
+    }
+    .bg {
+      background-attachment: inherit;
+    }
+  }
+}

src/Home/less/common.less

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

src/Home/less/content.less

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

src/Home/less/content1.less

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

src/Home/less/custom.less

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

src/Home/less/feature1.less

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

src/Home/less/feature2.less

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

src/Home/less/footer0.less

@@ -0,0 +1,28 @@
+.footer0-wrapper {
+  background-color: @template-bg-color;
+  height: 80px;
+  overflow: hidden;
+  .footer0 {
+    height: 100%;
+    padding: 0 24px;
+    line-height: 80px;
+    text-align: center;
+    color: @template-footer-text-color;
+    position: relative;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .footer0-wrapper {
+    .footer0 {
+      font-size: 12px;
+      &.home-page {
+        padding: 0;
+      }
+      >div {
+        width: 90%;
+        margin: auto;
+      }
+    }
+  }
+}

src/Home/utils.js

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

src/global.less

@@ -0,0 +1,4 @@
+@import "./Home/less/antMotionStyle.less";
+
+:global {
+}

src/pages/Download/index.jsx

@@ -0,0 +1,41 @@
+/* eslint-disable react/button-has-type */
+/* eslint-disable jsx-a11y/img-redundant-alt */
+import React from 'react';
+import bgPng from './images/bg.png';
+import styles from './index.less';
+
+function isAndroid() {
+  const u = navigator.userAgent;
+  return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
+}
+
+function isIOS() {
+  const u = navigator.userAgent;
+  return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+}
+
+export default function Download() {
+  return (
+    <>
+      <div className={styles.download}>
+        <img className={styles.bgImage} src={bgPng} alt="background image" />
+        <button onClick={() => {
+          if (isAndroid()) {
+            window.open(
+              `http://hn-fm-oss.mangguonews.com/bkb/BKB_release.apk?${new Date().getTime()}`);
+          } else if(isIOS()) {
+            window.open(
+              `https://apps.apple.com/us/app/bkb-app/id6474423781`);
+          } else {
+            window.open(
+              `http://hn-fm-oss.mangguonews.com/bkb/BKB_release.apk?${new Date().getTime()}`);
+          }
+        }}
+          className={styles.button}
+        >
+          Download
+        </button>
+      </div>
+    </>
+  );
+}

src/pages/Download/index.less

@@ -0,0 +1,32 @@
+.download{
+    margin: 0 auto;
+    min-height: 100vh;
+    height: auto;
+    overflow-x: hidden;
+    position: relative;
+    background-color: #e1f6fe;
+    .bgImage{
+        position: relative;
+        width: 100%;
+        height: auto;
+    }
+    .button{
+        position: fixed;
+        width: 83vw;
+        height: 54px;
+        background: #45B5C4;
+        border-radius: 2.25rem;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 600;
+        font-size: 16px;
+        color: #FFFFFF;
+        line-height: 54px;
+        text-align: center;
+        font-style: normal;
+        border:none;
+        bottom: 40px;
+        z-index: 999;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}

src/pages/Index/index.css

@@ -0,0 +1,4 @@
+
+.normal {
+  background: #C6F279;
+}

src/pages/Index/index.jsx

@@ -0,0 +1,8 @@
+import Home from '../../Home';
+
+export default function Index() {
+  return (
+    // eslint-disable-next-line react/react-in-jsx-scope
+    <Home />
+  );
+}

src/pages/document.ejs

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>长沙一个地球网络科技有限公司</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>