Strip out landing pages.
This commit is contained in:
Patrick Fic
@@ -1,61 +0,0 @@
|
||||
import React from "react";
|
||||
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";
|
||||
|
||||
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
|
||||
)}
|
||||
</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 +0,0 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import { Col, Row} from 'antd';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
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)}
|
||||
</div>
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
</QueueAnim>
|
||||
</OverPack>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Content;
|
||||
@@ -1,70 +0,0 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import TweenOne from 'rc-tween-one';
|
||||
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,
|
||||
}}
|
||||
>
|
||||
<span {...dataSource.img}>
|
||||
<img src={dataSource.img.children} width="100%" alt="img"/>
|
||||
</span>
|
||||
</TweenOne>
|
||||
<QueueAnim
|
||||
key="text"
|
||||
type={animType.queue}
|
||||
leaveReverse
|
||||
ease={['easeOutQuad', 'easeInQuad']}
|
||||
{...dataSource.textWrapper}
|
||||
component={Col}
|
||||
componentProps={{
|
||||
md: dataSource.textWrapper.md,
|
||||
xs: dataSource.textWrapper.xs,
|
||||
}}
|
||||
>
|
||||
<h2 key="h1" {...dataSource.title}>
|
||||
{dataSource.title.children}
|
||||
</h2>
|
||||
<div key="p" {...dataSource.content}>
|
||||
{dataSource.content.children}
|
||||
</div>
|
||||
</QueueAnim>
|
||||
</OverPack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Content1;
|
||||
@@ -1,60 +0,0 @@
|
||||
import React from 'react';
|
||||
import {Col, Row} from 'antd';
|
||||
import {TweenOneGroup} from 'rc-tween-one';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import {getChildrenToRender} from './utils';
|
||||
|
||||
class Content12 extends React.PureComponent {
|
||||
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"/>
|
||||
</span>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Content12;
|
||||
@@ -1,94 +0,0 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import TweenOne from 'rc-tween-one';
|
||||
import {Col, Row} from 'antd';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import {getChildrenToRender} from './utils';
|
||||
|
||||
class Content3 extends React.PureComponent {
|
||||
getDelay = (e, b) => (e % b) * 100 + Math.floor(e / b) * 100 + b * 100;
|
||||
|
||||
render() {
|
||||
const {...props} = this.props;
|
||||
const {dataSource, isMobile} = props;
|
||||
delete props.dataSource;
|
||||
delete props.isMobile;
|
||||
let clearFloatNum = 0;
|
||||
const children = dataSource.block.children.map((item, i) => {
|
||||
const childObj = item.children;
|
||||
const delay = isMobile ? i * 50 : this.getDelay(i, 24 / item.md);
|
||||
const liAnim = {
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
ease: 'easeOutQuad',
|
||||
delay,
|
||||
};
|
||||
const childrenAnim = {...liAnim, x: '+=10', delay: delay + 100};
|
||||
clearFloatNum += item.md;
|
||||
clearFloatNum = clearFloatNum > 24 ? 0 : clearFloatNum;
|
||||
return (
|
||||
<TweenOne
|
||||
component={Col}
|
||||
animation={liAnim}
|
||||
key={item.name}
|
||||
{...item}
|
||||
componentProps={{md: item.md, xs: item.xs}}
|
||||
className={
|
||||
!clearFloatNum
|
||||
? `${item.className || ''} clear-both`.trim()
|
||||
: item.className
|
||||
}
|
||||
>
|
||||
<TweenOne
|
||||
animation={{
|
||||
x: '-=10',
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
ease: 'easeOutQuad',
|
||||
}}
|
||||
key="img"
|
||||
{...childObj.icon}
|
||||
>
|
||||
<img src={childObj.icon.children} width="100%" alt="img"/>
|
||||
</TweenOne>
|
||||
<div {...childObj.textWrapper}>
|
||||
<TweenOne
|
||||
key="h2"
|
||||
animation={childrenAnim}
|
||||
component="h2"
|
||||
{...childObj.title}
|
||||
>
|
||||
{childObj.title.children}
|
||||
</TweenOne>
|
||||
<TweenOne
|
||||
key="p"
|
||||
animation={{...childrenAnim, delay: delay + 200}}
|
||||
component="div"
|
||||
{...childObj.content}
|
||||
>
|
||||
{childObj.content.children}
|
||||
</TweenOne>
|
||||
</div>
|
||||
</TweenOne>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<div {...props} {...dataSource.wrapper}>
|
||||
<div {...dataSource.page}>
|
||||
<div {...dataSource.titleWrapper}>
|
||||
{dataSource.titleWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
<OverPack {...dataSource.OverPack}>
|
||||
<QueueAnim key="u" type="bottom">
|
||||
<Row key="row" {...dataSource.block}>
|
||||
{children}
|
||||
</Row>
|
||||
</QueueAnim>
|
||||
</OverPack>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Content3;
|
||||
@@ -1,59 +0,0 @@
|
||||
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';
|
||||
|
||||
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)}
|
||||
</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;
|
||||
@@ -1,68 +0,0 @@
|
||||
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 { Col, Row} from 'antd';
|
||||
import {getChildrenToRender,isImg} from './utils';
|
||||
|
||||
class Footer extends React.Component {
|
||||
static defaultProps = {
|
||||
className: 'footer1',
|
||||
};
|
||||
|
||||
getLiChildren = (data) =>
|
||||
data.map((item, i) => {
|
||||
const {title, childWrapper, ...itemProps} = item;
|
||||
return (
|
||||
<Col key={i.toString()} {...itemProps} title={null} content={null}>
|
||||
<h2 {...title}>
|
||||
{typeof title.children === 'string' &&
|
||||
title.children.match(isImg) ? (
|
||||
<img src={title.children} width="100%" alt="img"/>
|
||||
) : (
|
||||
title.children
|
||||
)}
|
||||
</h2>
|
||||
<div {...childWrapper}>
|
||||
{childWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
</Col>
|
||||
);
|
||||
});
|
||||
|
||||
render() {
|
||||
const {...props} = this.props;
|
||||
const {dataSource} = props;
|
||||
delete props.dataSource;
|
||||
delete props.isMobile;
|
||||
const childrenToRender = this.getLiChildren(dataSource.block.children);
|
||||
return (
|
||||
<div {...props} {...dataSource.wrapper}>
|
||||
<OverPack {...dataSource.OverPack}>
|
||||
<QueueAnim
|
||||
type="bottom"
|
||||
key="ul"
|
||||
leaveReverse
|
||||
component={Row}
|
||||
{...dataSource.block}
|
||||
>
|
||||
{childrenToRender}
|
||||
</QueueAnim>
|
||||
<TweenOne
|
||||
animation={{y: '+=30', opacity: 0, type: 'from'}}
|
||||
key="copyright"
|
||||
{...dataSource.copyrightWrapper}
|
||||
>
|
||||
<div {...dataSource.copyrightPage}>
|
||||
<div {...dataSource.copyright}>
|
||||
{dataSource.copyright.children}
|
||||
</div>
|
||||
</div>
|
||||
</TweenOne>
|
||||
</OverPack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
@@ -1,134 +0,0 @@
|
||||
import React from 'react';
|
||||
import TweenOne from 'rc-tween-one';
|
||||
import {Menu} from 'antd';
|
||||
import {getChildrenToRender} from './utils';
|
||||
|
||||
const {Item, SubMenu} = Menu;
|
||||
|
||||
class Header extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
phoneOpen: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
phoneClick = () => {
|
||||
const phoneOpen = !this.state.phoneOpen;
|
||||
this.setState({
|
||||
phoneOpen,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {dataSource, isMobile, ...props} = this.props;
|
||||
const {phoneOpen} = this.state;
|
||||
const navData = dataSource.Menu.children;
|
||||
const navChildren = navData.map((item) => {
|
||||
const {children: a, subItem, ...itemProps} = item;
|
||||
if (subItem) {
|
||||
return (
|
||||
<SubMenu
|
||||
key={item.name}
|
||||
{...itemProps}
|
||||
title={
|
||||
<div
|
||||
{...a}
|
||||
className={`header0-item-block ${a.className}`.trim()}
|
||||
>
|
||||
{a.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
}
|
||||
popupClassName="header0-item-child"
|
||||
>
|
||||
{subItem.map(($item, ii) => {
|
||||
const {children: childItem} = $item;
|
||||
const child = childItem.href ? (
|
||||
<a {...childItem}>
|
||||
{childItem.children.map(getChildrenToRender)}
|
||||
</a>
|
||||
) : (
|
||||
<div {...childItem}>
|
||||
{childItem.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<Item key={$item.name || ii.toString()} {...$item}>
|
||||
{child}
|
||||
</Item>
|
||||
);
|
||||
})}
|
||||
</SubMenu>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Item key={item.name} {...itemProps}>
|
||||
<a {...a} className={`header0-item-block ${a.className}`.trim()}>
|
||||
{a.children.map(getChildrenToRender)}
|
||||
</a>
|
||||
</Item>
|
||||
);
|
||||
});
|
||||
const moment = phoneOpen === undefined ? 300 : null;
|
||||
return (
|
||||
<TweenOne
|
||||
component="header"
|
||||
animation={{opacity: 0, type: 'from'}}
|
||||
{...dataSource.wrapper}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
{...dataSource.page}
|
||||
className={`${dataSource.page.className}${phoneOpen ? ' open' : ''}`}
|
||||
>
|
||||
<TweenOne
|
||||
animation={{x: -30, type: 'from', ease: 'easeOutQuad'}}
|
||||
{...dataSource.logo}
|
||||
>
|
||||
<img width="100%" src={dataSource.logo.children} alt="img"/>
|
||||
</TweenOne>
|
||||
{isMobile && (
|
||||
<div
|
||||
{...dataSource.mobileMenu}
|
||||
onClick={() => {
|
||||
this.phoneClick();
|
||||
}}
|
||||
>
|
||||
<em/>
|
||||
<em/>
|
||||
<em/>
|
||||
</div>
|
||||
)}
|
||||
<TweenOne
|
||||
{...dataSource.Menu}
|
||||
animation={
|
||||
isMobile
|
||||
? {
|
||||
height: 0,
|
||||
duration: 300,
|
||||
onComplete: (e) => {
|
||||
if (this.state.phoneOpen) {
|
||||
e.target.style.height = 'auto';
|
||||
}
|
||||
},
|
||||
ease: 'easeInOutQuad',
|
||||
}
|
||||
: null
|
||||
}
|
||||
moment={moment}
|
||||
reverse={!!phoneOpen}
|
||||
>
|
||||
<Menu
|
||||
mode={isMobile ? 'inline' : 'horizontal'}
|
||||
defaultSelectedKeys={['sub0']}
|
||||
theme="dark"
|
||||
items={navChildren}
|
||||
/>
|
||||
</TweenOne>
|
||||
</div>
|
||||
</TweenOne>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@@ -1,73 +0,0 @@
|
||||
import React from 'react';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
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 +0,0 @@
|
||||
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';
|
||||
|
||||
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),
|
||||
};
|
||||
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,4 +0,0 @@
|
||||
# 如何使用：
|
||||
|
||||
- umi 里如何使用[请查看](https://landing.ant.design/docs/use/umi)。
|
||||
- 其它脚手架使用[请查看](https://landing.ant.design/docs/use/getting-started)。
|
||||
@@ -1,67 +0,0 @@
|
||||
/* eslint no-undef: 0 */
|
||||
/* eslint arrow-parens: 0 */
|
||||
|
||||
import {enquireScreen} from "enquire-js";
|
||||
import React from "react";
|
||||
import Banner0 from "./Banner0";
|
||||
import {Banner00DataSource, Footer10DataSource,} from "./data.source";
|
||||
import Footer1 from "./Footer1";
|
||||
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,
|
||||
};
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
@import './common.less';
|
||||
@import './custom.less';
|
||||
@import './content.less';
|
||||
@import './nav0.less';
|
||||
@import './banner0.less';
|
||||
@import './content4.less';
|
||||
@import './content0.less';
|
||||
@import './content1.less';
|
||||
@import './pricing2.less';
|
||||
@import './pricing1.less';
|
||||
@import './content3.less';
|
||||
@import './content12.less';
|
||||
@import './footer1.less';
|
||||
@import './edit.less';
|
||||
@@ -1,121 +0,0 @@
|
||||
@banner0: banner0;
|
||||
.@{banner0} {
|
||||
// 如果在第一屏且导航位置为 relative, 一屏为 height: calc(~"100vh - 64px");
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
border-color: #666;
|
||||
background-image: url("../../assets/banner4.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;
|
||||
}
|
||||
}
|
||||
|
||||
& &-button2 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
// @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;
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
@content0: content0;
|
||||
|
||||
.@{content0}-wrapper {
|
||||
min-height: 446px;
|
||||
overflow: hidden;
|
||||
|
||||
.@{content0} {
|
||||
height: 100%;
|
||||
padding: 64px 24px;
|
||||
|
||||
> .title-wrapper {
|
||||
margin: 0 auto 48px;
|
||||
}
|
||||
|
||||
&-block {
|
||||
padding: 0 4%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
min-height: 200px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
top: 25%;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
&.queue-anim-leaving {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
&-title {
|
||||
line-height: 32px;
|
||||
margin: 10px auto;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{content0}-wrapper {
|
||||
min-height: 880px;
|
||||
}
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
@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: 250px;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
padding: 0 32px;
|
||||
height: 100%;
|
||||
|
||||
.@{content1}-content,
|
||||
.@{content1}-title {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.@{content1}-title {
|
||||
font-size: 32px;
|
||||
font-weight: normal;
|
||||
color: #404040;
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{content1}-wrapper {
|
||||
height: 600px;
|
||||
|
||||
.@{content1} {
|
||||
&-img {
|
||||
height: 200px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
margin-top: 64px;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
height: 200px;
|
||||
line-height: 200px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
|
||||
.@{content1}-content,
|
||||
.@{content1}-title {
|
||||
width: 100%;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.@{content1}-title {
|
||||
margin: 32px auto 16px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
@content12: content12;
|
||||
.@{content12}-wrapper {
|
||||
background-color: #fafafa;
|
||||
min-height: 470px;
|
||||
|
||||
.@{content12} {
|
||||
padding: 64px 24px;
|
||||
|
||||
> p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.img-wrapper {
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.block {
|
||||
margin-bottom: 40px;
|
||||
|
||||
.block-content {
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
transition: box-shadow .3s @ease-out, transform .3s @ease-out;
|
||||
|
||||
& > span {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{content12}-wrapper {
|
||||
overflow: hidden;
|
||||
|
||||
.@{content12} {
|
||||
ul {
|
||||
li {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 2%;
|
||||
|
||||
span {
|
||||
height: 168px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
@content3: content3;
|
||||
.@{content3}-wrapper {
|
||||
min-height: 764px;
|
||||
|
||||
.@{content3} {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
& .title-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-block-wrapper {
|
||||
position: relative;
|
||||
|
||||
.@{content3}-block {
|
||||
display: inline-block;
|
||||
padding: 48px 24px;
|
||||
vertical-align: top;
|
||||
|
||||
.@{content3}-icon {
|
||||
display: inline-block;
|
||||
width: 15%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.@{content3}-text {
|
||||
width: 85%;
|
||||
display: inline-block;
|
||||
padding-left: 8%;
|
||||
}
|
||||
|
||||
&.clear-both {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{content3}-wrapper {
|
||||
min-height: 1080px;
|
||||
|
||||
.@{content3} {
|
||||
&-block-wrapper {
|
||||
margin: 20px auto;
|
||||
height: auto;
|
||||
|
||||
.@{content3}-block {
|
||||
.@{content3}-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&.queue-anim-leaving {
|
||||
position: relative !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
@content4: content4;
|
||||
.@{content4}-wrapper {
|
||||
min-height: 720px;
|
||||
background: #fafafa;
|
||||
|
||||
.@{content4} {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&-video {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
|
||||
|
||||
video {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
//@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);
|
||||
}
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
.footer1-wrapper {
|
||||
background: @template-bg-color;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
min-height: 360px;
|
||||
color: @template-footer-text-color;
|
||||
|
||||
.footer1 {
|
||||
.home-page {
|
||||
padding: 64px 24px 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.block {
|
||||
padding: 0 32px;
|
||||
|
||||
.logo {
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
.slogan {
|
||||
font-size: 12px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
> h2 {
|
||||
margin-bottom: 24px;
|
||||
color: @template-text-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @template-footer-text-color;
|
||||
margin-bottom: 12px;
|
||||
float: left;
|
||||
clear: both;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright-wrapper {
|
||||
width: 100%;
|
||||
border-top: 1px solid fade(@line-color, 10);
|
||||
|
||||
.home-page {
|
||||
padding: 0 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.footer1 {
|
||||
min-height: 550px;
|
||||
|
||||
&-wrapper {
|
||||
.footer1 {
|
||||
.home-page {
|
||||
padding: 64px 24px 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 auto 24px;
|
||||
}
|
||||
|
||||
.block {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> ul {
|
||||
width: 90%;
|
||||
margin: 20px auto 0;
|
||||
padding: 10px 0;
|
||||
|
||||
> li {
|
||||
width: 100%;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
&-wrapper {
|
||||
.home-page {
|
||||
padding: 0;
|
||||
|
||||
.copyright {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,189 +0,0 @@
|
||||
@header0: header0;
|
||||
|
||||
.@{header0} {
|
||||
background: @template-nav-bg-color;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
box-shadow: 0 5px 8px fade(#000, 15);
|
||||
position: relative;
|
||||
top: 0;
|
||||
|
||||
.home-page {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
&-logo {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
line-height: 64px;
|
||||
|
||||
& img {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
& a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
float: right;
|
||||
|
||||
.ant-menu {
|
||||
line-height: 62px;
|
||||
height: 64px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
&-block {
|
||||
padding: 0 8px;
|
||||
|
||||
> * {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-item,
|
||||
&-item-child,
|
||||
&-menu {
|
||||
|
||||
.ant-menu-sub .ant-menu-item,
|
||||
.ant-menu-inline .ant-menu-item {
|
||||
height: auto;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.item {
|
||||
&-sub-item {
|
||||
display: block;
|
||||
padding: 8px 24px;
|
||||
}
|
||||
|
||||
&-image {
|
||||
float: left;
|
||||
margin-right: 16px;
|
||||
margin-top: 4px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
margin-left: 46px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
font-size: 12px;
|
||||
color: fade(#fff, 75);
|
||||
margin-left: 46px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{header0} {
|
||||
&-logo {
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
&.home-page-wrapper .home-page {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
&-menu {
|
||||
height: auto;
|
||||
float: inherit;
|
||||
position: relative;
|
||||
left: -24px;
|
||||
width: ~"calc(100% + 48px)";
|
||||
opacity: 0;
|
||||
transition: opacity .3s @ease-in-out;
|
||||
|
||||
& li {
|
||||
padding: 0 24px;
|
||||
|
||||
&.ant-menu-submenu {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
&-sub-item {
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-mobile-menu {
|
||||
width: 16px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
z-index: 100;
|
||||
|
||||
em {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #fff;
|
||||
margin-top: 4px;
|
||||
transition: transform .3s @ease-in-out, opacity .3s @ease-in-out;
|
||||
}
|
||||
|
||||
:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
|
||||
.ant-menu-item-selected {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .open {
|
||||
height: auto;
|
||||
|
||||
.@{header0}-mobile-menu {
|
||||
em {
|
||||
&:nth-child(1) {
|
||||
transform: translateY(6px) rotate(45deg);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
transform: translateY(-6px) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .@{header0}-menu {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-item-block {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,101 +0,0 @@
|
||||
@pricing1: pricing1;
|
||||
.@{pricing1}-wrapper {
|
||||
min-height: 760px;
|
||||
|
||||
.@{pricing1} {
|
||||
> p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-content-wrapper {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
&-block-box {
|
||||
width: 260px;
|
||||
border-radius: 4px;
|
||||
background: #eef0f3;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
min-height: 400px;
|
||||
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;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{pricing1}-wrapper {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
@pricing2: pricing2;
|
||||
|
||||
.@{pricing2}-wrapper {
|
||||
min-height: 760px;
|
||||
|
||||
.@{pricing2} {
|
||||
> p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-content-wrapper {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
&-table-name-block {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-table-name {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
&-table-money {
|
||||
font-size: 16px;
|
||||
margin: 8px 0 16px;
|
||||
}
|
||||
|
||||
&-table-content {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
|
||||
&-name {
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.home-page-wrapper {
|
||||
.@{pricing2}-title-wrapper {
|
||||
margin-bottom: 64px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{pricing2} {
|
||||
&-wrapper {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&-table {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
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);
|
||||
};
|
||||
@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom';
|
||||
import { createStructuredSelector } from 'reselect';
|
||||
import { selectCurrentUser } from '../../redux/user/user.selectors';
|
||||
import { Spin } from 'antd';
|
||||
//import LandingPageStatic from "../../landing/index";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
currentUser: selectCurrentUser,
|
||||
|
||||
Reference in New Issue
Block a user