Dave Richer
@@ -1,60 +1,61 @@
|
||||
import React from "react";
|
||||
import { Button, Card, Space } from "antd";
|
||||
import { DownOutlined } from "@ant-design/icons";
|
||||
import {Button, Card, Space} from "antd";
|
||||
import {DownOutlined} from "@ant-design/icons";
|
||||
import QueueAnim from "rc-queue-anim";
|
||||
import TweenOne from "rc-tween-one";
|
||||
import { isImg } from "./utils";
|
||||
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}
|
||||
>
|
||||
<Card style={{ opacity: "80%", background: "#000" }}>
|
||||
<div key="title" {...dataSource.title}>
|
||||
{typeof dataSource.title.children === "string" &&
|
||||
dataSource.title.children.match(isImg) ? (
|
||||
<img src={dataSource.title.children} width="100%" alt="img" />
|
||||
) : (
|
||||
dataSource.title.children
|
||||
)}
|
||||
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}
|
||||
>
|
||||
<Card style={{opacity: "80%", background: "#000"}}>
|
||||
<div key="title" {...dataSource.title}>
|
||||
{typeof dataSource.title.children === "string" &&
|
||||
dataSource.title.children.match(isImg) ? (
|
||||
<img src={dataSource.title.children} width="100%" alt="img"/>
|
||||
) : (
|
||||
dataSource.title.children
|
||||
)}
|
||||
</div>
|
||||
<div key="content" {...dataSource.content}>
|
||||
{dataSource.content.children}
|
||||
</div>
|
||||
<Space wrap>
|
||||
<Button ghost key="button" {...dataSource.button}>
|
||||
{dataSource.button.children}
|
||||
</Button>
|
||||
<Button type="primary" key="button2" {...dataSource.button2}>
|
||||
{dataSource.button2.children}
|
||||
</Button>
|
||||
</Space>
|
||||
</Card>
|
||||
</QueueAnim>
|
||||
<TweenOne
|
||||
animation={{
|
||||
y: "-=20",
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
duration: 1000,
|
||||
}}
|
||||
className="banner0-icon"
|
||||
key="icon"
|
||||
>
|
||||
<DownOutlined/>
|
||||
</TweenOne>
|
||||
</div>
|
||||
<div key="content" {...dataSource.content}>
|
||||
{dataSource.content.children}
|
||||
</div>
|
||||
<Space wrap>
|
||||
<Button ghost key="button" {...dataSource.button}>
|
||||
{dataSource.button.children}
|
||||
</Button>
|
||||
<Button type="primary" key="button2" {...dataSource.button2}>
|
||||
{dataSource.button2.children}
|
||||
</Button>
|
||||
</Space>
|
||||
</Card>
|
||||
</QueueAnim>
|
||||
<TweenOne
|
||||
animation={{
|
||||
y: "-=20",
|
||||
yoyo: true,
|
||||
repeat: -1,
|
||||
duration: 1000,
|
||||
}}
|
||||
className="banner0-icon"
|
||||
key="icon"
|
||||
>
|
||||
<DownOutlined />
|
||||
</TweenOne>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Banner;
|
||||
|
||||
@@ -1,49 +1,49 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import { Row, Col } from 'antd';
|
||||
import {Row, Col} from 'antd';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import { getChildrenToRender } from './utils';
|
||||
import {getChildrenToRender} from './utils';
|
||||
|
||||
class Content extends React.PureComponent {
|
||||
render() {
|
||||
const { dataSource, isMobile, ...props } = this.props;
|
||||
const {
|
||||
wrapper,
|
||||
titleWrapper,
|
||||
page,
|
||||
OverPack: overPackData,
|
||||
childWrapper,
|
||||
} = dataSource;
|
||||
return (
|
||||
<div {...props} {...wrapper}>
|
||||
<div {...page}>
|
||||
<div {...titleWrapper}>
|
||||
{titleWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
<OverPack {...overPackData}>
|
||||
<QueueAnim
|
||||
type="bottom"
|
||||
key="block"
|
||||
leaveReverse
|
||||
component={Row}
|
||||
componentProps={childWrapper}
|
||||
>
|
||||
{childWrapper.children.map((block, i) => {
|
||||
const { children: item, ...blockProps } = block;
|
||||
return (
|
||||
<Col key={i.toString()} {...blockProps}>
|
||||
<div {...item}>
|
||||
{item.children.map(getChildrenToRender)}
|
||||
render() {
|
||||
const {dataSource, isMobile, ...props} = this.props;
|
||||
const {
|
||||
wrapper,
|
||||
titleWrapper,
|
||||
page,
|
||||
OverPack: overPackData,
|
||||
childWrapper,
|
||||
} = dataSource;
|
||||
return (
|
||||
<div {...props} {...wrapper}>
|
||||
<div {...page}>
|
||||
<div {...titleWrapper}>
|
||||
{titleWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
</QueueAnim>
|
||||
</OverPack>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<OverPack {...overPackData}>
|
||||
<QueueAnim
|
||||
type="bottom"
|
||||
key="block"
|
||||
leaveReverse
|
||||
component={Row}
|
||||
componentProps={childWrapper}
|
||||
>
|
||||
{childWrapper.children.map((block, i) => {
|
||||
const {children: item, ...blockProps} = block;
|
||||
return (
|
||||
<Col key={i.toString()} {...blockProps}>
|
||||
<div {...item}>
|
||||
{item.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
</QueueAnim>
|
||||
</OverPack>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Content;
|
||||
|
||||
@@ -1,70 +1,70 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import TweenOne from 'rc-tween-one';
|
||||
import { Row, Col } from 'antd';
|
||||
import {Col, Row} from 'antd';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
|
||||
function Content1(props) {
|
||||
const { ...tagProps } = props;
|
||||
const { dataSource, isMobile } = tagProps;
|
||||
delete tagProps.dataSource;
|
||||
delete tagProps.isMobile;
|
||||
const animType = {
|
||||
queue: isMobile ? 'bottom' : 'right',
|
||||
one: isMobile
|
||||
? {
|
||||
scaleY: '+=0.3',
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
ease: 'easeOutQuad',
|
||||
}
|
||||
: {
|
||||
x: '-=30',
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
ease: 'easeOutQuad',
|
||||
},
|
||||
};
|
||||
return (
|
||||
<div {...tagProps} {...dataSource.wrapper}>
|
||||
<OverPack {...dataSource.OverPack} component={Row}>
|
||||
<TweenOne
|
||||
key="img"
|
||||
animation={animType.one}
|
||||
resetStyle
|
||||
{...dataSource.imgWrapper}
|
||||
component={Col}
|
||||
componentProps={{
|
||||
md: dataSource.imgWrapper.md,
|
||||
xs: dataSource.imgWrapper.xs,
|
||||
}}
|
||||
>
|
||||
const {...tagProps} = props;
|
||||
const {dataSource, isMobile} = tagProps;
|
||||
delete tagProps.dataSource;
|
||||
delete tagProps.isMobile;
|
||||
const animType = {
|
||||
queue: isMobile ? 'bottom' : 'right',
|
||||
one: isMobile
|
||||
? {
|
||||
scaleY: '+=0.3',
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
ease: 'easeOutQuad',
|
||||
}
|
||||
: {
|
||||
x: '-=30',
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
ease: 'easeOutQuad',
|
||||
},
|
||||
};
|
||||
return (
|
||||
<div {...tagProps} {...dataSource.wrapper}>
|
||||
<OverPack {...dataSource.OverPack} component={Row}>
|
||||
<TweenOne
|
||||
key="img"
|
||||
animation={animType.one}
|
||||
resetStyle
|
||||
{...dataSource.imgWrapper}
|
||||
component={Col}
|
||||
componentProps={{
|
||||
md: dataSource.imgWrapper.md,
|
||||
xs: dataSource.imgWrapper.xs,
|
||||
}}
|
||||
>
|
||||
<span {...dataSource.img}>
|
||||
<img src={dataSource.img.children} width="100%" alt="img" />
|
||||
<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>
|
||||
);
|
||||
</TweenOne>
|
||||
<QueueAnim
|
||||
key="text"
|
||||
type={animType.queue}
|
||||
leaveReverse
|
||||
ease={['easeOutQuad', 'easeInQuad']}
|
||||
{...dataSource.textWrapper}
|
||||
component={Col}
|
||||
componentProps={{
|
||||
md: dataSource.textWrapper.md,
|
||||
xs: dataSource.textWrapper.xs,
|
||||
}}
|
||||
>
|
||||
<h2 key="h1" {...dataSource.title}>
|
||||
{dataSource.title.children}
|
||||
</h2>
|
||||
<div key="p" {...dataSource.content}>
|
||||
{dataSource.content.children}
|
||||
</div>
|
||||
</QueueAnim>
|
||||
</OverPack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Content1;
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
import React from 'react';
|
||||
import { Row, Col } from 'antd';
|
||||
import { TweenOneGroup } from 'rc-tween-one';
|
||||
import {Col, Row} from 'antd';
|
||||
import {TweenOneGroup} from 'rc-tween-one';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import { getChildrenToRender } from './utils';
|
||||
import {getChildrenToRender} from './utils';
|
||||
|
||||
class Content12 extends React.PureComponent {
|
||||
getChildrenToRender = (data) =>
|
||||
data.map((item) => {
|
||||
return (
|
||||
<Col key={item.name} {...item}>
|
||||
<div {...item.children.wrapper}>
|
||||
getChildrenToRender = (data) =>
|
||||
data.map((item) => {
|
||||
return (
|
||||
<Col key={item.name} {...item}>
|
||||
<div {...item.children.wrapper}>
|
||||
<span {...item.children.img}>
|
||||
<img src={item.children.img.children} alt="img" />
|
||||
<img src={item.children.img.children} alt="img"/>
|
||||
</span>
|
||||
</div>
|
||||
</Col>
|
||||
);
|
||||
});
|
||||
</div>
|
||||
</Col>
|
||||
);
|
||||
});
|
||||
|
||||
render() {
|
||||
const { ...props } = this.props;
|
||||
const { dataSource } = props;
|
||||
delete props.dataSource;
|
||||
delete props.isMobile;
|
||||
const childrenToRender = this.getChildrenToRender(
|
||||
dataSource.block.children
|
||||
);
|
||||
return (
|
||||
<div {...props} {...dataSource.wrapper}>
|
||||
<div {...dataSource.page}>
|
||||
<div key="title" {...dataSource.titleWrapper}>
|
||||
{dataSource.titleWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
<OverPack
|
||||
className={`content-template ${props.className}`}
|
||||
{...dataSource.OverPack}
|
||||
>
|
||||
<TweenOneGroup
|
||||
component={Row}
|
||||
key="ul"
|
||||
enter={{
|
||||
y: '+=30',
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
ease: 'easeOutQuad',
|
||||
}}
|
||||
leave={{ y: '+=30', opacity: 0, ease: 'easeOutQuad' }}
|
||||
{...dataSource.block}
|
||||
>
|
||||
{childrenToRender}
|
||||
</TweenOneGroup>
|
||||
</OverPack>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
render() {
|
||||
const {...props} = this.props;
|
||||
const {dataSource} = props;
|
||||
delete props.dataSource;
|
||||
delete props.isMobile;
|
||||
const childrenToRender = this.getChildrenToRender(
|
||||
dataSource.block.children
|
||||
);
|
||||
return (
|
||||
<div {...props} {...dataSource.wrapper}>
|
||||
<div {...dataSource.page}>
|
||||
<div key="title" {...dataSource.titleWrapper}>
|
||||
{dataSource.titleWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
<OverPack
|
||||
className={`content-template ${props.className}`}
|
||||
{...dataSource.OverPack}
|
||||
>
|
||||
<TweenOneGroup
|
||||
component={Row}
|
||||
key="ul"
|
||||
enter={{
|
||||
y: '+=30',
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
ease: 'easeOutQuad',
|
||||
}}
|
||||
leave={{y: '+=30', opacity: 0, ease: 'easeOutQuad'}}
|
||||
{...dataSource.block}
|
||||
>
|
||||
{childrenToRender}
|
||||
</TweenOneGroup>
|
||||
</OverPack>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Content12;
|
||||
|
||||
@@ -1,94 +1,94 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import TweenOne from 'rc-tween-one';
|
||||
import { Row, Col } from 'antd';
|
||||
import {Col, Row} from 'antd';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import { getChildrenToRender } from './utils';
|
||||
import {getChildrenToRender} from './utils';
|
||||
|
||||
class Content3 extends React.PureComponent {
|
||||
getDelay = (e, b) => (e % b) * 100 + Math.floor(e / b) * 100 + b * 100;
|
||||
getDelay = (e, b) => (e % b) * 100 + Math.floor(e / b) * 100 + b * 100;
|
||||
|
||||
render() {
|
||||
const { ...props } = this.props;
|
||||
const { dataSource, isMobile } = props;
|
||||
delete props.dataSource;
|
||||
delete props.isMobile;
|
||||
let clearFloatNum = 0;
|
||||
const children = dataSource.block.children.map((item, i) => {
|
||||
const childObj = item.children;
|
||||
const delay = isMobile ? i * 50 : this.getDelay(i, 24 / item.md);
|
||||
const liAnim = {
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
ease: 'easeOutQuad',
|
||||
delay,
|
||||
};
|
||||
const childrenAnim = { ...liAnim, x: '+=10', delay: delay + 100 };
|
||||
clearFloatNum += item.md;
|
||||
clearFloatNum = clearFloatNum > 24 ? 0 : clearFloatNum;
|
||||
return (
|
||||
<TweenOne
|
||||
component={Col}
|
||||
animation={liAnim}
|
||||
key={item.name}
|
||||
{...item}
|
||||
componentProps={{ md: item.md, xs: item.xs }}
|
||||
className={
|
||||
!clearFloatNum
|
||||
? `${item.className || ''} clear-both`.trim()
|
||||
: item.className
|
||||
}
|
||||
>
|
||||
<TweenOne
|
||||
animation={{
|
||||
x: '-=10',
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
ease: 'easeOutQuad',
|
||||
}}
|
||||
key="img"
|
||||
{...childObj.icon}
|
||||
>
|
||||
<img src={childObj.icon.children} width="100%" alt="img" />
|
||||
</TweenOne>
|
||||
<div {...childObj.textWrapper}>
|
||||
<TweenOne
|
||||
key="h2"
|
||||
animation={childrenAnim}
|
||||
component="h2"
|
||||
{...childObj.title}
|
||||
>
|
||||
{childObj.title.children}
|
||||
</TweenOne>
|
||||
<TweenOne
|
||||
key="p"
|
||||
animation={{ ...childrenAnim, delay: delay + 200 }}
|
||||
component="div"
|
||||
{...childObj.content}
|
||||
>
|
||||
{childObj.content.children}
|
||||
</TweenOne>
|
||||
</div>
|
||||
</TweenOne>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<div {...props} {...dataSource.wrapper}>
|
||||
<div {...dataSource.page}>
|
||||
<div {...dataSource.titleWrapper}>
|
||||
{dataSource.titleWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
<OverPack {...dataSource.OverPack}>
|
||||
<QueueAnim key="u" type="bottom">
|
||||
<Row key="row" {...dataSource.block}>
|
||||
{children}
|
||||
</Row>
|
||||
</QueueAnim>
|
||||
</OverPack>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
render() {
|
||||
const {...props} = this.props;
|
||||
const {dataSource, isMobile} = props;
|
||||
delete props.dataSource;
|
||||
delete props.isMobile;
|
||||
let clearFloatNum = 0;
|
||||
const children = dataSource.block.children.map((item, i) => {
|
||||
const childObj = item.children;
|
||||
const delay = isMobile ? i * 50 : this.getDelay(i, 24 / item.md);
|
||||
const liAnim = {
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
ease: 'easeOutQuad',
|
||||
delay,
|
||||
};
|
||||
const childrenAnim = {...liAnim, x: '+=10', delay: delay + 100};
|
||||
clearFloatNum += item.md;
|
||||
clearFloatNum = clearFloatNum > 24 ? 0 : clearFloatNum;
|
||||
return (
|
||||
<TweenOne
|
||||
component={Col}
|
||||
animation={liAnim}
|
||||
key={item.name}
|
||||
{...item}
|
||||
componentProps={{md: item.md, xs: item.xs}}
|
||||
className={
|
||||
!clearFloatNum
|
||||
? `${item.className || ''} clear-both`.trim()
|
||||
: item.className
|
||||
}
|
||||
>
|
||||
<TweenOne
|
||||
animation={{
|
||||
x: '-=10',
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
ease: 'easeOutQuad',
|
||||
}}
|
||||
key="img"
|
||||
{...childObj.icon}
|
||||
>
|
||||
<img src={childObj.icon.children} width="100%" alt="img"/>
|
||||
</TweenOne>
|
||||
<div {...childObj.textWrapper}>
|
||||
<TweenOne
|
||||
key="h2"
|
||||
animation={childrenAnim}
|
||||
component="h2"
|
||||
{...childObj.title}
|
||||
>
|
||||
{childObj.title.children}
|
||||
</TweenOne>
|
||||
<TweenOne
|
||||
key="p"
|
||||
animation={{...childrenAnim, delay: delay + 200}}
|
||||
component="div"
|
||||
{...childObj.content}
|
||||
>
|
||||
{childObj.content.children}
|
||||
</TweenOne>
|
||||
</div>
|
||||
</TweenOne>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<div {...props} {...dataSource.wrapper}>
|
||||
<div {...dataSource.page}>
|
||||
<div {...dataSource.titleWrapper}>
|
||||
{dataSource.titleWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
<OverPack {...dataSource.OverPack}>
|
||||
<QueueAnim key="u" type="bottom">
|
||||
<Row key="row" {...dataSource.block}>
|
||||
{children}
|
||||
</Row>
|
||||
</QueueAnim>
|
||||
</OverPack>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Content3;
|
||||
|
||||
@@ -2,58 +2,58 @@ import React from 'react';
|
||||
import TweenOne from 'rc-tween-one';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import VideoPlay from 'react-sublime-video';
|
||||
import { getChildrenToRender } from './utils';
|
||||
import {getChildrenToRender} from './utils';
|
||||
|
||||
function Content4(props) {
|
||||
const { ...tagProps } = props;
|
||||
const { dataSource, isMobile } = tagProps;
|
||||
delete tagProps.dataSource;
|
||||
delete tagProps.isMobile;
|
||||
const animation = {
|
||||
y: '+=30',
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
ease: 'easeOutQuad',
|
||||
};
|
||||
const videoChildren = dataSource.video.children.video;
|
||||
const videoNameArray = videoChildren.split('.');
|
||||
const type = videoNameArray[videoNameArray.length - 1];
|
||||
return (
|
||||
<div {...tagProps} {...dataSource.wrapper}>
|
||||
<div {...dataSource.page}>
|
||||
<div key="title" {...dataSource.titleWrapper}>
|
||||
{dataSource.titleWrapper.children.map(getChildrenToRender)}
|
||||
const {...tagProps} = props;
|
||||
const {dataSource, isMobile} = tagProps;
|
||||
delete tagProps.dataSource;
|
||||
delete tagProps.isMobile;
|
||||
const animation = {
|
||||
y: '+=30',
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
ease: 'easeOutQuad',
|
||||
};
|
||||
const videoChildren = dataSource.video.children.video;
|
||||
const videoNameArray = videoChildren.split('.');
|
||||
const type = videoNameArray[videoNameArray.length - 1];
|
||||
return (
|
||||
<div {...tagProps} {...dataSource.wrapper}>
|
||||
<div {...dataSource.page}>
|
||||
<div key="title" {...dataSource.titleWrapper}>
|
||||
{dataSource.titleWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
<OverPack {...dataSource.OverPack}>
|
||||
<TweenOne
|
||||
key="video"
|
||||
animation={{...animation, delay: 300}}
|
||||
{...dataSource.video}
|
||||
>
|
||||
{isMobile ? (
|
||||
<video
|
||||
width="100%"
|
||||
loop
|
||||
controls
|
||||
poster={dataSource.video.children.image}
|
||||
>
|
||||
<source src={videoChildren} type={`video/${type}`}/>
|
||||
<track kind="captions"/>
|
||||
</video>
|
||||
) : (
|
||||
<VideoPlay
|
||||
loop
|
||||
width="100%"
|
||||
poster={dataSource.video.children.image}
|
||||
>
|
||||
<source src={videoChildren} type={`video/${type}`}/>
|
||||
</VideoPlay>
|
||||
)}
|
||||
</TweenOne>
|
||||
</OverPack>
|
||||
</div>
|
||||
</div>
|
||||
<OverPack {...dataSource.OverPack}>
|
||||
<TweenOne
|
||||
key="video"
|
||||
animation={{ ...animation, delay: 300 }}
|
||||
{...dataSource.video}
|
||||
>
|
||||
{isMobile ? (
|
||||
<video
|
||||
width="100%"
|
||||
loop
|
||||
controls
|
||||
poster={dataSource.video.children.image}
|
||||
>
|
||||
<source src={videoChildren} type={`video/${type}`} />
|
||||
<track kind="captions" />
|
||||
</video>
|
||||
) : (
|
||||
<VideoPlay
|
||||
loop
|
||||
width="100%"
|
||||
poster={dataSource.video.children.image}
|
||||
>
|
||||
<source src={videoChildren} type={`video/${type}`} />
|
||||
</VideoPlay>
|
||||
)}
|
||||
</TweenOne>
|
||||
</OverPack>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
export default Content4;
|
||||
|
||||
@@ -2,68 +2,68 @@ 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';
|
||||
import {Row, Col} from 'antd';
|
||||
import {getChildrenToRender} from './utils';
|
||||
import {isImg} from './utils';
|
||||
|
||||
class Footer extends React.Component {
|
||||
static defaultProps = {
|
||||
className: 'footer1',
|
||||
};
|
||||
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>
|
||||
);
|
||||
});
|
||||
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>
|
||||
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>
|
||||
</TweenOne>
|
||||
</OverPack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
|
||||
@@ -1,134 +1,134 @@
|
||||
import React from 'react';
|
||||
import TweenOne from 'rc-tween-one';
|
||||
import { Menu } from 'antd';
|
||||
import { getChildrenToRender } from './utils';
|
||||
import {Menu} from 'antd';
|
||||
import {getChildrenToRender} from './utils';
|
||||
|
||||
const { Item, SubMenu } = Menu;
|
||||
const {Item, SubMenu} = Menu;
|
||||
|
||||
class Header extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
phoneOpen: undefined,
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
phoneOpen: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
phoneClick = () => {
|
||||
const phoneOpen = !this.state.phoneOpen;
|
||||
this.setState({
|
||||
phoneOpen,
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
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>
|
||||
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>
|
||||
);
|
||||
}
|
||||
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}
|
||||
return (
|
||||
<Item key={item.name} {...itemProps}>
|
||||
<a {...a} className={`header0-item-block ${a.className}`.trim()}>
|
||||
{a.children.map(getChildrenToRender)}
|
||||
</a>
|
||||
</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();
|
||||
}}
|
||||
);
|
||||
});
|
||||
const moment = phoneOpen === undefined ? 300 : null;
|
||||
return (
|
||||
<TweenOne
|
||||
component="header"
|
||||
animation={{opacity: 0, type: 'from'}}
|
||||
{...dataSource.wrapper}
|
||||
{...props}
|
||||
>
|
||||
<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"
|
||||
items={navChildren}
|
||||
/>
|
||||
</TweenOne>
|
||||
</div>
|
||||
</TweenOne>
|
||||
);
|
||||
}
|
||||
<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"
|
||||
items={navChildren}
|
||||
/>
|
||||
</TweenOne>
|
||||
</div>
|
||||
</TweenOne>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Header;
|
||||
|
||||
@@ -1,73 +1,73 @@
|
||||
import React from 'react';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import { Row, Col, Button } from 'antd';
|
||||
import { getChildrenToRender } from './utils';
|
||||
import {Button, Col, Row} from 'antd';
|
||||
import {getChildrenToRender} from './utils';
|
||||
|
||||
class Pricing1 extends React.PureComponent {
|
||||
getChildrenToRender = (item) => {
|
||||
const {
|
||||
wrapper,
|
||||
topWrapper,
|
||||
name,
|
||||
buttonWrapper,
|
||||
line,
|
||||
content,
|
||||
money,
|
||||
} = item.children;
|
||||
return (
|
||||
<Col key={item.name} {...item}>
|
||||
<QueueAnim type="bottom" {...wrapper}>
|
||||
<div {...topWrapper}>
|
||||
<div {...name} key="name">
|
||||
{name.children}
|
||||
</div>
|
||||
<h1 {...money} key="money">
|
||||
{money.children}
|
||||
</h1>
|
||||
</div>
|
||||
<div {...content} key="content">
|
||||
{content.children}
|
||||
</div>
|
||||
<i {...line} key="line" />
|
||||
<div {...buttonWrapper} key="button">
|
||||
<Button {...buttonWrapper.children.a}>
|
||||
{buttonWrapper.children.a.children}
|
||||
</Button>
|
||||
</div>
|
||||
</QueueAnim>
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
getChildrenToRender = (item) => {
|
||||
const {
|
||||
wrapper,
|
||||
topWrapper,
|
||||
name,
|
||||
buttonWrapper,
|
||||
line,
|
||||
content,
|
||||
money,
|
||||
} = item.children;
|
||||
return (
|
||||
<Col key={item.name} {...item}>
|
||||
<QueueAnim type="bottom" {...wrapper}>
|
||||
<div {...topWrapper}>
|
||||
<div {...name} key="name">
|
||||
{name.children}
|
||||
</div>
|
||||
<h1 {...money} key="money">
|
||||
{money.children}
|
||||
</h1>
|
||||
</div>
|
||||
<div {...content} key="content">
|
||||
{content.children}
|
||||
</div>
|
||||
<i {...line} key="line"/>
|
||||
<div {...buttonWrapper} key="button">
|
||||
<Button {...buttonWrapper.children.a}>
|
||||
{buttonWrapper.children.a.children}
|
||||
</Button>
|
||||
</div>
|
||||
</QueueAnim>
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { ...props } = this.props;
|
||||
const { dataSource } = props;
|
||||
delete props.dataSource;
|
||||
delete props.isMobile;
|
||||
const { block } = dataSource;
|
||||
const childrenToRender = block.children.map(this.getChildrenToRender);
|
||||
return (
|
||||
<div {...props} {...dataSource.wrapper}>
|
||||
<div {...dataSource.page}>
|
||||
<div key="title" {...dataSource.titleWrapper}>
|
||||
{dataSource.titleWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
<OverPack {...dataSource.OverPack}>
|
||||
<QueueAnim
|
||||
type="bottom"
|
||||
component={Row}
|
||||
leaveReverse
|
||||
ease={['easeOutQuad', 'easeInOutQuad']}
|
||||
key="content"
|
||||
>
|
||||
{childrenToRender}
|
||||
</QueueAnim>
|
||||
</OverPack>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
render() {
|
||||
const {...props} = this.props;
|
||||
const {dataSource} = props;
|
||||
delete props.dataSource;
|
||||
delete props.isMobile;
|
||||
const {block} = dataSource;
|
||||
const childrenToRender = block.children.map(this.getChildrenToRender);
|
||||
return (
|
||||
<div {...props} {...dataSource.wrapper}>
|
||||
<div {...dataSource.page}>
|
||||
<div key="title" {...dataSource.titleWrapper}>
|
||||
{dataSource.titleWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
<OverPack {...dataSource.OverPack}>
|
||||
<QueueAnim
|
||||
type="bottom"
|
||||
component={Row}
|
||||
leaveReverse
|
||||
ease={['easeOutQuad', 'easeInOutQuad']}
|
||||
key="content"
|
||||
>
|
||||
{childrenToRender}
|
||||
</QueueAnim>
|
||||
</OverPack>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Pricing1;
|
||||
|
||||
@@ -1,114 +1,114 @@
|
||||
import React from 'react';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import { Table } from 'antd';
|
||||
import { getChildrenToRender, isImg } from './utils';
|
||||
import {Table} from 'antd';
|
||||
import {getChildrenToRender, isImg} from './utils';
|
||||
|
||||
class Pricing2 extends React.PureComponent {
|
||||
getColumns = (columns) => {
|
||||
return columns.map((item) => {
|
||||
const { childWrapper, ...$item } = item;
|
||||
return {
|
||||
align: 'center',
|
||||
...$item,
|
||||
title: (
|
||||
<div {...childWrapper}>
|
||||
{childWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
),
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
getDataSource = (dataSource, columns) =>
|
||||
dataSource.map((item, i) => {
|
||||
const obj = { key: i.toString() };
|
||||
item.children.forEach(($item, ii) => {
|
||||
if (columns[ii]) {
|
||||
obj[columns[ii].key] = (
|
||||
<div {...$item}>
|
||||
{typeof $item.children === 'string' &&
|
||||
$item.children.match(isImg) ? (
|
||||
<img src={$item.children} alt="img" />
|
||||
) : (
|
||||
$item.children
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
return obj;
|
||||
});
|
||||
|
||||
getMobileChild = (table) => {
|
||||
const { columns, dataSource, ...tableProps } = table;
|
||||
const names = columns.children.filter(
|
||||
(item) => item.key.indexOf('name') >= 0
|
||||
);
|
||||
const newColumns = columns.children.filter(
|
||||
(item) => item.key.indexOf('name') === -1
|
||||
);
|
||||
return newColumns.map((item, i) => {
|
||||
const items = [].concat(names[0], item).filter((c) => c);
|
||||
if (items.length > 1) {
|
||||
items[0].colSpan = 0;
|
||||
items[1].colSpan = 2;
|
||||
}
|
||||
const dataSources = dataSource.children.map(($item) => {
|
||||
const child = $item.children.filter(
|
||||
(c) => c.name.indexOf('name') === -1
|
||||
);
|
||||
const n = $item.children.filter((c) => c.name.indexOf('name') >= 0);
|
||||
return {
|
||||
...$item,
|
||||
children: [].concat(n[0], child[i]).filter((c) => c),
|
||||
};
|
||||
});
|
||||
const props = {
|
||||
...tableProps,
|
||||
columns: this.getColumns(items),
|
||||
dataSource: this.getDataSource(dataSources, items),
|
||||
};
|
||||
return (
|
||||
<Table key={i.toString()} {...props} pagination={false} bordered />
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource, isMobile, ...props } = this.props;
|
||||
const { Table: table, wrapper, page, titleWrapper } = dataSource;
|
||||
const { columns, dataSource: tableData, ...$table } = table;
|
||||
const tableProps = {
|
||||
...$table,
|
||||
columns: this.getColumns(columns.children),
|
||||
dataSource: this.getDataSource(tableData.children, columns.children),
|
||||
getColumns = (columns) => {
|
||||
return columns.map((item) => {
|
||||
const {childWrapper, ...$item} = item;
|
||||
return {
|
||||
align: 'center',
|
||||
...$item,
|
||||
title: (
|
||||
<div {...childWrapper}>
|
||||
{childWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
),
|
||||
};
|
||||
});
|
||||
};
|
||||
const childrenToRender = isMobile ? (
|
||||
this.getMobileChild(table)
|
||||
) : (
|
||||
<Table key="table" {...tableProps} pagination={false} bordered />
|
||||
);
|
||||
return (
|
||||
<div {...props} {...wrapper}>
|
||||
<div {...page}>
|
||||
<div key="title" {...titleWrapper}>
|
||||
{titleWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
<OverPack {...dataSource.OverPack}>
|
||||
<QueueAnim
|
||||
type="bottom"
|
||||
leaveReverse
|
||||
ease={['easeOutQuad', 'easeInOutQuad']}
|
||||
key="content"
|
||||
>
|
||||
{childrenToRender}
|
||||
</QueueAnim>
|
||||
</OverPack>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
getDataSource = (dataSource, columns) =>
|
||||
dataSource.map((item, i) => {
|
||||
const obj = {key: i.toString()};
|
||||
item.children.forEach(($item, ii) => {
|
||||
if (columns[ii]) {
|
||||
obj[columns[ii].key] = (
|
||||
<div {...$item}>
|
||||
{typeof $item.children === 'string' &&
|
||||
$item.children.match(isImg) ? (
|
||||
<img src={$item.children} alt="img"/>
|
||||
) : (
|
||||
$item.children
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
return obj;
|
||||
});
|
||||
|
||||
getMobileChild = (table) => {
|
||||
const {columns, dataSource, ...tableProps} = table;
|
||||
const names = columns.children.filter(
|
||||
(item) => item.key.indexOf('name') >= 0
|
||||
);
|
||||
const newColumns = columns.children.filter(
|
||||
(item) => item.key.indexOf('name') === -1
|
||||
);
|
||||
return newColumns.map((item, i) => {
|
||||
const items = [].concat(names[0], item).filter((c) => c);
|
||||
if (items.length > 1) {
|
||||
items[0].colSpan = 0;
|
||||
items[1].colSpan = 2;
|
||||
}
|
||||
const dataSources = dataSource.children.map(($item) => {
|
||||
const child = $item.children.filter(
|
||||
(c) => c.name.indexOf('name') === -1
|
||||
);
|
||||
const n = $item.children.filter((c) => c.name.indexOf('name') >= 0);
|
||||
return {
|
||||
...$item,
|
||||
children: [].concat(n[0], child[i]).filter((c) => c),
|
||||
};
|
||||
});
|
||||
const props = {
|
||||
...tableProps,
|
||||
columns: this.getColumns(items),
|
||||
dataSource: this.getDataSource(dataSources, items),
|
||||
};
|
||||
return (
|
||||
<Table key={i.toString()} {...props} pagination={false} bordered/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {dataSource, isMobile, ...props} = this.props;
|
||||
const {Table: table, wrapper, page, titleWrapper} = dataSource;
|
||||
const {columns, dataSource: tableData, ...$table} = table;
|
||||
const tableProps = {
|
||||
...$table,
|
||||
columns: this.getColumns(columns.children),
|
||||
dataSource: this.getDataSource(tableData.children, columns.children),
|
||||
};
|
||||
const childrenToRender = isMobile ? (
|
||||
this.getMobileChild(table)
|
||||
) : (
|
||||
<Table key="table" {...tableProps} pagination={false} bordered/>
|
||||
);
|
||||
return (
|
||||
<div {...props} {...wrapper}>
|
||||
<div {...page}>
|
||||
<div key="title" {...titleWrapper}>
|
||||
{titleWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
<OverPack {...dataSource.OverPack}>
|
||||
<QueueAnim
|
||||
type="bottom"
|
||||
leaveReverse
|
||||
ease={['easeOutQuad', 'easeInOutQuad']}
|
||||
key="content"
|
||||
>
|
||||
{childrenToRender}
|
||||
</QueueAnim>
|
||||
</OverPack>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Pricing2;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,70 +1,67 @@
|
||||
/* eslint no-undef: 0 */
|
||||
/* eslint arrow-parens: 0 */
|
||||
|
||||
import { enquireScreen } from "enquire-js";
|
||||
import {enquireScreen} from "enquire-js";
|
||||
import React from "react";
|
||||
import Banner0 from "./Banner0";
|
||||
import {
|
||||
Banner00DataSource,
|
||||
Footer10DataSource,
|
||||
} from "./data.source";
|
||||
import {Banner00DataSource, Footer10DataSource,} from "./data.source";
|
||||
import Footer1 from "./Footer1";
|
||||
import "./less/antMotionStyle.less";
|
||||
|
||||
let isMobile;
|
||||
enquireScreen((b) => {
|
||||
isMobile = b;
|
||||
isMobile = b;
|
||||
});
|
||||
|
||||
const { location = {} } = typeof window !== "undefined" ? window : {};
|
||||
const {location = {}} = typeof window !== "undefined" ? window : {};
|
||||
|
||||
export default class Home extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isMobile,
|
||||
show: !location.port,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
enquireScreen((b) => {
|
||||
this.setState({ isMobile: !!b });
|
||||
});
|
||||
if (location.port) {
|
||||
// 样式 build 时间在 200-300ms 之间;
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
show: true,
|
||||
});
|
||||
}, 500);
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isMobile,
|
||||
show: !location.port,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const children = [
|
||||
<Banner0
|
||||
id="Banner0_0"
|
||||
key="Banner0_0"
|
||||
dataSource={Banner00DataSource}
|
||||
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;
|
||||
}}
|
||||
>
|
||||
{this.state.show && children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
componentDidMount() {
|
||||
enquireScreen((b) => {
|
||||
this.setState({isMobile: !!b});
|
||||
});
|
||||
if (location.port) {
|
||||
// 样式 build 时间在 200-300ms 之间;
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
show: true,
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const children = [
|
||||
<Banner0
|
||||
id="Banner0_0"
|
||||
key="Banner0_0"
|
||||
dataSource={Banner00DataSource}
|
||||
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;
|
||||
}}
|
||||
>
|
||||
{this.state.show && children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
|
||||
& &-text-wrapper {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
@@ -20,10 +21,12 @@
|
||||
font-size: 14px;
|
||||
color: @template-text-color-light;
|
||||
width: 550px;
|
||||
|
||||
> .queue-anim-leaving {
|
||||
position: relative !important;
|
||||
}
|
||||
}
|
||||
|
||||
& &-title {
|
||||
width: 350px;
|
||||
//left: 30px;
|
||||
@@ -33,11 +36,13 @@
|
||||
font-size: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
& &-content {
|
||||
margin-bottom: 20px;
|
||||
word-wrap: break-word;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
& &-button {
|
||||
border: 1px solid #fff;
|
||||
color: #fff;
|
||||
@@ -46,42 +51,50 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
& &-button2 {
|
||||
border: 1px solid #fff;
|
||||
color: #fff;
|
||||
// background: transparent;
|
||||
// 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;
|
||||
@@ -95,9 +108,11 @@
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{banner0} {
|
||||
background-attachment: inherit;
|
||||
|
||||
& &-text-wrapper {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
& &-title {
|
||||
width: 90%;
|
||||
left: 0;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
// @import "~antd/lib/style/v2-compatible-reset.less";
|
||||
|
||||
body {
|
||||
@@ -36,6 +35,7 @@ h6 {
|
||||
#react-content {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.home-page-wrapper p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.@{homepage} {
|
||||
height: 100%;
|
||||
max-width: 1200px;
|
||||
@@ -10,11 +11,13 @@
|
||||
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;
|
||||
@@ -29,14 +32,17 @@
|
||||
.@{homepage}-wrapper {
|
||||
.@{homepage} {
|
||||
padding: 56px 24px;
|
||||
>h1 {
|
||||
|
||||
> h1 {
|
||||
font-size: 24px;
|
||||
margin: 0 auto 32px;
|
||||
|
||||
&.title-h1 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
>p {
|
||||
|
||||
> p {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
height: 100%;
|
||||
padding: 64px 24px;
|
||||
|
||||
>.title-wrapper {
|
||||
> .title-wrapper {
|
||||
margin: 0 auto 48px;
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
text-align: center;
|
||||
min-height: 200px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
@content1: content1;
|
||||
.@{content1}-wrapper {
|
||||
height: 360px;
|
||||
|
||||
.@{content1} {
|
||||
height: 100%;
|
||||
padding: 0 24px;
|
||||
|
||||
&-img {
|
||||
height: 100%;
|
||||
transform-origin: top;
|
||||
@@ -11,27 +13,33 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 250px;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
padding: 0 32px;
|
||||
height: 100%;
|
||||
|
||||
.@{content1}-content,
|
||||
.@{content1}-title {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.@{content1}-title {
|
||||
font-size: 32px;
|
||||
font-weight: normal;
|
||||
color: #404040;
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 20px;
|
||||
}
|
||||
@@ -42,12 +50,14 @@
|
||||
@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;
|
||||
@@ -56,16 +66,19 @@
|
||||
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;
|
||||
|
||||
@@ -2,18 +2,23 @@
|
||||
.@{content12}-wrapper {
|
||||
background-color: #fafafa;
|
||||
min-height: 470px;
|
||||
|
||||
.@{content12} {
|
||||
padding: 64px 24px;
|
||||
>p {
|
||||
|
||||
> p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.img-wrapper {
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.block {
|
||||
margin-bottom: 40px;
|
||||
|
||||
.block-content {
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
@@ -24,6 +29,7 @@
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
transition: box-shadow .3s @ease-out, transform .3s @ease-out;
|
||||
|
||||
& > span {
|
||||
width: 100%;
|
||||
display: block;
|
||||
@@ -36,12 +42,14 @@
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{content12}-wrapper {
|
||||
overflow: hidden;
|
||||
|
||||
.@{content12} {
|
||||
ul {
|
||||
li {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 2%;
|
||||
|
||||
span {
|
||||
height: 168px;
|
||||
}
|
||||
|
||||
@@ -1,28 +1,35 @@
|
||||
@content3: content3;
|
||||
.@{content3}-wrapper {
|
||||
min-height: 764px;
|
||||
|
||||
.@{content3} {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
& .title-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-block-wrapper {
|
||||
position: relative;
|
||||
|
||||
.@{content3}-block {
|
||||
display: inline-block;
|
||||
padding: 48px 24px;
|
||||
vertical-align: top;
|
||||
|
||||
.@{content3}-icon {
|
||||
display: inline-block;
|
||||
width: 15%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.@{content3}-text {
|
||||
width: 85%;
|
||||
display: inline-block;
|
||||
padding-left: 8%;
|
||||
}
|
||||
|
||||
&.clear-both {
|
||||
clear: both;
|
||||
}
|
||||
@@ -34,14 +41,17 @@
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{content3}-wrapper {
|
||||
min-height: 1080px;
|
||||
|
||||
.@{content3} {
|
||||
&-block-wrapper {
|
||||
margin: 20px auto;
|
||||
height: auto;
|
||||
|
||||
.@{content3}-block {
|
||||
.@{content3}-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&.queue-anim-leaving {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
@@ -2,9 +2,11 @@
|
||||
.@{content4}-wrapper {
|
||||
min-height: 720px;
|
||||
background: #fafafa;
|
||||
|
||||
.@{content4} {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&-video {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
@@ -12,6 +14,7 @@
|
||||
margin: auto;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
|
||||
|
||||
video {
|
||||
display: block;
|
||||
margin: auto;
|
||||
@@ -23,10 +26,12 @@
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{content4}-wrapper {
|
||||
min-height: 350px;
|
||||
|
||||
.@{content4} {
|
||||
overflow: hidden;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
|
||||
&-video {
|
||||
top: 15%;
|
||||
background: url("https://zos.alipayobjects.com/rmsportal/HZgzhugQZkqUwBVeNyfz.jpg") no-repeat center;
|
||||
|
||||
@@ -4,41 +4,51 @@
|
||||
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 {
|
||||
|
||||
> 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;
|
||||
@@ -50,6 +60,7 @@
|
||||
@media screen and (max-width: 767px) {
|
||||
.footer1 {
|
||||
min-height: 550px;
|
||||
|
||||
&-wrapper {
|
||||
.footer1 {
|
||||
.home-page {
|
||||
@@ -57,33 +68,41 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 auto 24px;
|
||||
}
|
||||
|
||||
.block {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
padding: 0;
|
||||
}
|
||||
>ul {
|
||||
|
||||
> ul {
|
||||
width: 90%;
|
||||
margin: 20px auto 0;
|
||||
padding: 10px 0;
|
||||
>li {
|
||||
|
||||
> li {
|
||||
width: 100%;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
&-wrapper {
|
||||
.home-page {
|
||||
padding: 0;
|
||||
|
||||
.copyright {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
&-block {
|
||||
padding: 0 8px;
|
||||
|
||||
>* {
|
||||
> * {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@@ -116,6 +116,7 @@
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
&-sub-item {
|
||||
padding: 8px 0;
|
||||
@@ -174,11 +175,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
>.@{header0}-menu {
|
||||
> .@{header0}-menu {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-item-block {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
@pricing1: pricing1;
|
||||
.@{pricing1}-wrapper {
|
||||
min-height: 760px;
|
||||
|
||||
.@{pricing1} {
|
||||
>p {
|
||||
> p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-content-wrapper {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
&-block-box {
|
||||
width: 260px;
|
||||
border-radius: 4px;
|
||||
@@ -18,58 +21,71 @@
|
||||
margin: auto;
|
||||
border: 1px solid transparent;
|
||||
.page-pro();
|
||||
|
||||
&.active {
|
||||
border-color: @primary-color;
|
||||
background: #fff;
|
||||
|
||||
.@{pricing1} {
|
||||
&-top-wrapper {
|
||||
background: @primary-color;
|
||||
}
|
||||
|
||||
&-name,
|
||||
&-money,
|
||||
&-button {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&-button {
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-block {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
&-top-wrapper {
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
&-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&-money {
|
||||
font-family: 'Helvetica Neue', sans-serif;
|
||||
font-size: 32px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&-content {
|
||||
font-size: 12px;
|
||||
line-height: 2;
|
||||
font-weight: 300;
|
||||
margin: 32px 24px 48px;
|
||||
}
|
||||
|
||||
&-line {
|
||||
display: block;
|
||||
height: 1px;
|
||||
background: #d9d9d9;
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
&-button-wrapper {
|
||||
margin: 18px 24px;
|
||||
}
|
||||
|
||||
&-button {
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&.home-page-wrapper {
|
||||
.@{pricing1}-title-wrapper {
|
||||
margin-bottom: 64px;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
min-height: 760px;
|
||||
|
||||
.@{pricing2} {
|
||||
>p {
|
||||
> p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
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);
|
||||
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);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user