新的主页
还有几个链接问题
This commit is contained in:
@@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import Texty from 'rc-texty';
|
||||
import 'rc-texty/assets/index.css';
|
||||
|
||||
class Banner extends React.PureComponent {
|
||||
render() {
|
||||
const { ...currentProps } = this.props;
|
||||
const { dataSource } = currentProps;
|
||||
delete currentProps.dataSource;
|
||||
delete currentProps.isMobile;
|
||||
const children = dataSource.textWrapper.children.map((item) => {
|
||||
const { name, texty, ...$item } = item;
|
||||
if (name.match('button')) {
|
||||
return (
|
||||
<Button type="primary" key={name} {...$item}>
|
||||
{item.children}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={name} {...$item}>
|
||||
{texty ? (
|
||||
<Texty type="mask-bottom">{item.children}</Texty>
|
||||
) : (
|
||||
item.children
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<div {...currentProps} {...dataSource.wrapper}>
|
||||
<QueueAnim
|
||||
key="QueueAnim"
|
||||
type={['bottom', 'top']}
|
||||
delay={200}
|
||||
{...dataSource.textWrapper}
|
||||
>
|
||||
{children}
|
||||
</QueueAnim>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Banner;
|
||||
@@ -0,0 +1,40 @@
|
||||
import React from 'react';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import TweenOne from 'rc-tween-one';
|
||||
import { Button } from 'antd';
|
||||
import { getChildrenToRender } from './utils';
|
||||
|
||||
class Content11 extends React.PureComponent {
|
||||
render() {
|
||||
const { ...props } = this.props;
|
||||
const { dataSource } = props;
|
||||
delete props.dataSource;
|
||||
delete props.isMobile;
|
||||
return (
|
||||
<OverPack {...props} {...dataSource.OverPack}>
|
||||
<QueueAnim
|
||||
type="bottom"
|
||||
leaveReverse
|
||||
key="page"
|
||||
delay={[0, 100]}
|
||||
{...dataSource.titleWrapper}
|
||||
>
|
||||
{dataSource.titleWrapper.children.map(getChildrenToRender)}
|
||||
</QueueAnim>
|
||||
<TweenOne
|
||||
key="button"
|
||||
style={{ textAlign: 'center' }}
|
||||
{...dataSource.button}
|
||||
animation={{ y: 30, opacity: 0, type: 'from', delay: 300 }}
|
||||
>
|
||||
<Button {...dataSource.button.children.a}>
|
||||
{dataSource.button.children.a.children}
|
||||
</Button>
|
||||
</TweenOne>
|
||||
</OverPack>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Content11;
|
||||
@@ -0,0 +1,94 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import TweenOne from 'rc-tween-one';
|
||||
import { Row, Col } from 'antd';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import { 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;
|
||||
@@ -0,0 +1,61 @@
|
||||
import React from 'react';
|
||||
import { Row, Col } from 'antd';
|
||||
import { TweenOneGroup } from 'rc-tween-one';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import { getChildrenToRender } from './utils';
|
||||
|
||||
class Content5 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} height="100%" alt="img" />
|
||||
</span>
|
||||
<p {...item.children.content}>{item.children.content.children}</p>
|
||||
</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: 'easeInOutQuad',
|
||||
}}
|
||||
leave={{ y: '+=30', opacity: 0, ease: 'easeInOutQuad' }}
|
||||
{...dataSource.block}
|
||||
>
|
||||
{childrenToRender}
|
||||
</TweenOneGroup>
|
||||
</OverPack>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Content5;
|
||||
@@ -0,0 +1,79 @@
|
||||
import React from 'react';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import { getChildrenToRender } from './utils';
|
||||
|
||||
class Content9 extends React.PureComponent {
|
||||
getBlockChildren = (block, i) => {
|
||||
const { isMobile } = this.props;
|
||||
const item = block.children;
|
||||
const textWrapper = (
|
||||
<QueueAnim
|
||||
key="text"
|
||||
leaveReverse
|
||||
delay={isMobile ? [0, 100] : 0}
|
||||
{...item.textWrapper}
|
||||
>
|
||||
<div key="time" {...item.time}>
|
||||
{item.time.children}
|
||||
</div>
|
||||
<h2 key="title" {...item.title}>
|
||||
<i {...item.icon}>
|
||||
<img src={item.icon.children} alt="img" />
|
||||
</i>
|
||||
{item.title.children}
|
||||
</h2>
|
||||
<div key="p" {...item.content}>
|
||||
{item.content.children}
|
||||
</div>
|
||||
</QueueAnim>
|
||||
);
|
||||
return (
|
||||
<OverPack key={i.toString()} {...block}>
|
||||
{isMobile && textWrapper}
|
||||
<QueueAnim
|
||||
className="image-wrapper"
|
||||
key="image"
|
||||
type={isMobile ? 'right' : 'bottom'}
|
||||
leaveReverse
|
||||
delay={isMobile ? [100, 0] : 0}
|
||||
{...item.imgWrapper}
|
||||
>
|
||||
<div key="image" {...item.img}>
|
||||
<img src={item.img.children} alt="img" />
|
||||
</div>
|
||||
<div key="name" className="name-wrapper">
|
||||
<div key="name" {...item.name}>
|
||||
{item.name.children}
|
||||
</div>
|
||||
<div key="post" {...item.post}>
|
||||
{item.post.children}
|
||||
</div>
|
||||
</div>
|
||||
</QueueAnim>
|
||||
|
||||
{!isMobile && textWrapper}
|
||||
</OverPack>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { ...props } = this.props;
|
||||
const { dataSource } = props;
|
||||
delete props.dataSource;
|
||||
delete props.isMobile;
|
||||
const children = dataSource.block.children.map(this.getBlockChildren);
|
||||
return (
|
||||
<div {...props} {...dataSource.wrapper}>
|
||||
<div {...dataSource.page}>
|
||||
<div {...dataSource.titleWrapper}>
|
||||
{dataSource.titleWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
<div {...dataSource.block}>{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Content9;
|
||||
@@ -0,0 +1,70 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import TweenOne from 'rc-tween-one';
|
||||
import { Row, Col } from 'antd';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
|
||||
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;
|
||||
@@ -0,0 +1,74 @@
|
||||
import React from 'react';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import TweenOne from 'rc-tween-one';
|
||||
import { Row, Col } from 'antd';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
|
||||
function Content2(props) {
|
||||
const { ...tagProps } = props;
|
||||
const { dataSource, isMobile } = tagProps;
|
||||
delete tagProps.dataSource;
|
||||
delete tagProps.isMobile;
|
||||
const animType = {
|
||||
queue: isMobile ? 'bottom' : 'left',
|
||||
one: isMobile
|
||||
? {
|
||||
scaleY: '+=0.3',
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
ease: 'easeOutQuad',
|
||||
}
|
||||
: {
|
||||
x: '+=30',
|
||||
opacity: 0,
|
||||
type: 'from',
|
||||
ease: 'easeOutQuad',
|
||||
},
|
||||
};
|
||||
const img = (
|
||||
<TweenOne
|
||||
key="img"
|
||||
animation={animType.one}
|
||||
resetStyle
|
||||
{...dataSource.imgWrapper}
|
||||
component={Col}
|
||||
componentProps={{
|
||||
md: dataSource.imgWrapper.md,
|
||||
xs: dataSource.imgWrapper.xs,
|
||||
}}
|
||||
>
|
||||
<span {...dataSource.img}>
|
||||
<img src={dataSource.img.children} width="100%" alt="img" />
|
||||
</span>
|
||||
</TweenOne>
|
||||
);
|
||||
return (
|
||||
<div {...tagProps} {...dataSource.wrapper}>
|
||||
<OverPack {...dataSource.OverPack} component={Row}>
|
||||
{isMobile && img}
|
||||
<QueueAnim
|
||||
type={animType.queue}
|
||||
key="text"
|
||||
leaveReverse
|
||||
ease={['easeOutCubic', 'easeInCubic']}
|
||||
{...dataSource.textWrapper}
|
||||
component={Col}
|
||||
componentProps={{
|
||||
md: dataSource.textWrapper.md,
|
||||
xs: dataSource.textWrapper.xs,
|
||||
}}
|
||||
>
|
||||
<h2 key="h1" {...dataSource.title}>
|
||||
{dataSource.title.children}
|
||||
</h2>
|
||||
<div key="p" {...dataSource.content}>
|
||||
{dataSource.content.children}
|
||||
</div>
|
||||
</QueueAnim>
|
||||
{!isMobile && img}
|
||||
</OverPack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Content2;
|
||||
@@ -0,0 +1,156 @@
|
||||
import React from 'react';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import { Carousel as AntCarousel, Row, Col } from 'antd';
|
||||
import TweenOne from 'rc-tween-one';
|
||||
import Children from 'rc-tween-one/lib/plugin/ChildrenPlugin';
|
||||
|
||||
TweenOne.plugins.push(Children);
|
||||
|
||||
class Feature6 extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.carouselRef = React.createRef();
|
||||
this.state = {
|
||||
current: 0,
|
||||
};
|
||||
}
|
||||
|
||||
onTitleClick = (_, i) => {
|
||||
const carouselRef = this.carouselRef.current.childRefs.carousel;
|
||||
carouselRef.goTo(i);
|
||||
};
|
||||
|
||||
onBeforeChange = (_, newIndex) => {
|
||||
this.setState({
|
||||
current: newIndex,
|
||||
});
|
||||
};
|
||||
|
||||
getChildrenToRender = (dataSource) => {
|
||||
const { current } = this.state;
|
||||
const { Carousel } = dataSource;
|
||||
const {
|
||||
titleWrapper,
|
||||
children: childWrapper,
|
||||
wrapper,
|
||||
...carouselProps
|
||||
} = Carousel;
|
||||
|
||||
const {
|
||||
barWrapper,
|
||||
title: titleChild,
|
||||
...titleWrapperProps
|
||||
} = titleWrapper;
|
||||
const titleToRender = [];
|
||||
|
||||
const childrenToRender = childWrapper.map((item, ii) => {
|
||||
const { title, children, ...itemProps } = item;
|
||||
titleToRender.push(
|
||||
<div
|
||||
{...title}
|
||||
key={ii.toString()}
|
||||
onClick={(e) => {
|
||||
this.onTitleClick(e, ii);
|
||||
}}
|
||||
className={
|
||||
ii === current ? `${title.className || ''} active` : title.className
|
||||
}
|
||||
>
|
||||
{title.children}
|
||||
</div>
|
||||
);
|
||||
const childrenItem = children.map(($item, i) => {
|
||||
const { number, children: child, ...childProps } = $item;
|
||||
const numberChild = number.children.replace(/[^0-9.-]/g, '');
|
||||
const { unit, toText, ...numberProps } = number;
|
||||
return (
|
||||
<Col {...childProps} key={i.toString()}>
|
||||
<TweenOne
|
||||
{...numberProps}
|
||||
animation={{
|
||||
Children: {
|
||||
value: parseFloat(numberChild),
|
||||
floatLength:
|
||||
parseFloat(numberChild) -
|
||||
Math.floor(parseFloat(numberChild)) >
|
||||
0
|
||||
? 2
|
||||
: 0,
|
||||
formatMoney: true,
|
||||
},
|
||||
duration: 1000,
|
||||
delay: 300,
|
||||
ease: 'easeInOutCirc',
|
||||
}}
|
||||
component="span"
|
||||
>
|
||||
0
|
||||
</TweenOne>
|
||||
{unit && <span {...unit}>{unit.children}</span>}
|
||||
<p {...child}>{child.children}</p>
|
||||
</Col>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<QueueAnim
|
||||
type="bottom"
|
||||
component={Row}
|
||||
{...itemProps}
|
||||
key={ii.toString()}
|
||||
>
|
||||
{childrenItem}
|
||||
</QueueAnim>
|
||||
);
|
||||
});
|
||||
|
||||
const width = 100 / childrenToRender.length;
|
||||
return (
|
||||
<QueueAnim
|
||||
key="queue"
|
||||
leaveReverse
|
||||
type="bottom"
|
||||
delay={[0, 100]}
|
||||
{...wrapper}
|
||||
ref={this.carouselRef}
|
||||
>
|
||||
<div {...titleWrapperProps} key="title">
|
||||
<div {...titleChild}>
|
||||
{titleToRender}
|
||||
<div
|
||||
{...barWrapper}
|
||||
style={{
|
||||
width: `${width}%`,
|
||||
left: `${width * current}%`,
|
||||
}}
|
||||
>
|
||||
<em {...barWrapper.children} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AntCarousel
|
||||
{...carouselProps}
|
||||
key="carousel"
|
||||
infinite={false}
|
||||
beforeChange={this.onBeforeChange}
|
||||
>
|
||||
{childrenToRender}
|
||||
</AntCarousel>
|
||||
</QueueAnim>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource, isMobile, ...props } = this.props;
|
||||
return (
|
||||
<div {...props} {...dataSource.wrapper}>
|
||||
<div>
|
||||
<OverPack {...dataSource.OverPack}>
|
||||
{this.getChildrenToRender(dataSource)}
|
||||
</OverPack>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Feature6;
|
||||
@@ -0,0 +1,139 @@
|
||||
import React from 'react';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
import QueueAnim from 'rc-queue-anim';
|
||||
import { Carousel as AntCarousel, Row, Col } from 'antd';
|
||||
import { getChildrenToRender } from './utils';
|
||||
|
||||
class Feature8 extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.carouselRef = React.createRef();
|
||||
this.state = {
|
||||
current: 0,
|
||||
};
|
||||
}
|
||||
|
||||
onTitleClick = (_, i) => {
|
||||
const carouselRef = this.carouselRef.current.childRefs.carousel;
|
||||
carouselRef.goTo(i);
|
||||
};
|
||||
|
||||
onBeforeChange = (_, newIndex) => {
|
||||
this.setState({
|
||||
current: newIndex,
|
||||
});
|
||||
};
|
||||
|
||||
getChildrenToRender = (dataSource) => {
|
||||
const { current } = this.state;
|
||||
const { Carousel, childWrapper: buttonWrapper } = dataSource;
|
||||
const { children: carouselChild, wrapper, ...carouselProps } = Carousel;
|
||||
const {
|
||||
titleWrapper,
|
||||
children: childWrapper,
|
||||
...childrenProps
|
||||
} = carouselChild;
|
||||
|
||||
const {
|
||||
barWrapper,
|
||||
title: titleChild,
|
||||
...titleWrapperProps
|
||||
} = titleWrapper;
|
||||
const titleToRender = [];
|
||||
|
||||
const childrenToRender = childWrapper.map((item, ii) => {
|
||||
const { title, children: childRow, ...rowProps } = item;
|
||||
if (childWrapper.length > 1) {
|
||||
titleToRender.push(
|
||||
<div
|
||||
{...title}
|
||||
key={ii.toString()}
|
||||
onClick={(e) => {
|
||||
this.onTitleClick(e, ii);
|
||||
}}
|
||||
className={
|
||||
ii === current
|
||||
? `${title.className || ''} active`
|
||||
: title.className
|
||||
}
|
||||
>
|
||||
{title.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const childrenItem = childRow.map(($item, i) => {
|
||||
const { children: colChild, arrow, ...colProps } = $item;
|
||||
const { ...childProps } = colChild;
|
||||
return (
|
||||
<Col {...colProps} key={i.toString()}>
|
||||
<div {...childProps}>
|
||||
{colChild.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
{arrow && (
|
||||
<div {...arrow}>
|
||||
<img src={arrow.children} alt="img" />
|
||||
</div>
|
||||
)}
|
||||
</Col>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div key={ii.toString()}>
|
||||
<QueueAnim
|
||||
component={Row}
|
||||
type="bottom"
|
||||
componentProps={{ type: 'flex' }}
|
||||
{...rowProps}
|
||||
>
|
||||
{childrenItem}
|
||||
</QueueAnim>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<QueueAnim
|
||||
key="queue"
|
||||
type="bottom"
|
||||
ref={this.carouselRef}
|
||||
{...childrenProps}
|
||||
>
|
||||
{childWrapper.length > 1 && (
|
||||
<div {...titleWrapperProps} key="title">
|
||||
<div {...titleChild}>{titleToRender}</div>
|
||||
</div>
|
||||
)}
|
||||
<AntCarousel
|
||||
key="carousel"
|
||||
{...carouselProps}
|
||||
infinite={false}
|
||||
beforeChange={this.onBeforeChange}
|
||||
>
|
||||
{childrenToRender}
|
||||
</AntCarousel>
|
||||
<div key="button" {...buttonWrapper}>
|
||||
{buttonWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
</QueueAnim>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource, isMobile, ...props } = this.props;
|
||||
const { titleWrapper } = dataSource;
|
||||
return (
|
||||
<div {...props} {...dataSource.wrapper}>
|
||||
<div {...dataSource.page}>
|
||||
<div {...dataSource.titleWrapper}>
|
||||
{titleWrapper.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
<OverPack {...dataSource.OverPack}>
|
||||
{this.getChildrenToRender(dataSource)}
|
||||
</OverPack>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Feature8;
|
||||
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import TweenOne from 'rc-tween-one';
|
||||
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
||||
|
||||
class Footer extends React.PureComponent {
|
||||
render() {
|
||||
const { ...props } = this.props;
|
||||
const { dataSource } = props;
|
||||
delete props.dataSource;
|
||||
delete props.isMobile;
|
||||
return (
|
||||
<div {...props} {...dataSource.wrapper}>
|
||||
<OverPack {...dataSource.OverPack}>
|
||||
<TweenOne
|
||||
animation={{ y: '+=30', opacity: 0, type: 'from' }}
|
||||
key="footer"
|
||||
{...dataSource.copyright}
|
||||
>
|
||||
{dataSource.copyright.children}
|
||||
</TweenOne>
|
||||
</OverPack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
@@ -0,0 +1,136 @@
|
||||
import React from 'react';
|
||||
import TweenOne from 'rc-tween-one';
|
||||
import { Menu } from 'antd';
|
||||
import { getChildrenToRender } from './utils';
|
||||
|
||||
const { Item, SubMenu } = Menu;
|
||||
|
||||
class Header3 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={`header3-item-block ${a.className}`.trim()}
|
||||
>
|
||||
{a.children.map(getChildrenToRender)}
|
||||
</div>
|
||||
}
|
||||
popupClassName="header3-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={`header3-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
|
||||
? {
|
||||
x: 0,
|
||||
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="light"
|
||||
>
|
||||
{navChildren}
|
||||
</Menu>
|
||||
</TweenOne>
|
||||
</div>
|
||||
</TweenOne>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Header3;
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
import Link from 'rc-scroll-anim/lib/ScrollLink';
|
||||
|
||||
export default function Point(props) {
|
||||
const { data, size, position, type, stroke } = props;
|
||||
const children = data.map((item) => {
|
||||
if (item.match('nav') || item.match('footer')) {
|
||||
return null;
|
||||
}
|
||||
const className = `point ${type} ${stroke} ${size}`.trim();
|
||||
return (
|
||||
<Link
|
||||
key={item}
|
||||
className={className}
|
||||
to={item}
|
||||
toHash={false}
|
||||
/>
|
||||
);
|
||||
}).filter((item) => item);
|
||||
const wrapperClass = `point-wrapper ${position} ${size}`.trim();
|
||||
return (
|
||||
<div
|
||||
className={wrapperClass}
|
||||
>
|
||||
<div>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Point.defaultProps = {
|
||||
size: '',
|
||||
position: '',
|
||||
type: '',
|
||||
stroke: '',
|
||||
};
|
||||
+1640
-13
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,105 @@
|
||||
/* eslint no-undef: 0 */
|
||||
/* eslint arrow-parens: 0 */
|
||||
import React from 'react';
|
||||
import { enquireScreen } from 'enquire-js';
|
||||
|
||||
import Content11 from './Content11';
|
||||
import Feature1 from './Feature1';
|
||||
import Nav3 from './Nav3';
|
||||
import {
|
||||
Nav30DataSource,
|
||||
Content110DataSource,
|
||||
Feature13DataSource,
|
||||
Feature11DataSource,
|
||||
Feature12DataSource,
|
||||
Footer00DataSource,
|
||||
} from './data.source';
|
||||
import './less/antMotionStyle.less';
|
||||
import Footer0 from './Footer0';
|
||||
let isMobile;
|
||||
enquireScreen((b) => {
|
||||
isMobile = b;
|
||||
});
|
||||
|
||||
const { location } = window;
|
||||
|
||||
export default class Page2 extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isMobile,
|
||||
show: !location.port, // 如果不是 dva 2.0 请删除
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// 适配手机屏幕;
|
||||
enquireScreen((b) => {
|
||||
this.setState({ isMobile: !!b });
|
||||
});
|
||||
// dva 2.0 样式在组件渲染之后动态加载，导致滚动组件不生效；线上不影响；
|
||||
/* 如果不是 dva 2.0 请删除 start */
|
||||
if (location.port) {
|
||||
// 样式 build 时间在 200-300ms 之间;
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
show: true,
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
/* 如果不是 dva 2.0 请删除 end */
|
||||
}
|
||||
|
||||
render() {
|
||||
const children = [
|
||||
<Nav3
|
||||
id="Nav3_0"
|
||||
key="Nav3_0"
|
||||
dataSource={Nav30DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Content11
|
||||
id="Content11_0"
|
||||
key="Content11_0"
|
||||
dataSource={Content110DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Feature1
|
||||
id="Feature1_0"
|
||||
key="Feature1_0"
|
||||
dataSource={Feature13DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Feature1
|
||||
id="Feature1_1"
|
||||
key="Feature1_1"
|
||||
dataSource={Feature11DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Feature1
|
||||
id="Feature1_2"
|
||||
key="Feature1_2"
|
||||
dataSource={Feature12DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Footer0
|
||||
id="Footer0_0"
|
||||
key="Footer0_0"
|
||||
dataSource={Footer00DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
];
|
||||
return (
|
||||
<div
|
||||
className="templates-wrapper"
|
||||
ref={(d) => {
|
||||
this.dom = d;
|
||||
}}
|
||||
>
|
||||
{/* 如果不是 dva 2.0 替换成 {children} start */}
|
||||
{this.state.show && children}
|
||||
{/* 如果不是 dva 2.0 替换成 {children} end */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
/* eslint no-undef: 0 */
|
||||
/* eslint arrow-parens: 0 */
|
||||
import React from 'react';
|
||||
import { enquireScreen } from 'enquire-js';
|
||||
|
||||
import Teams1 from './Teams1';
|
||||
|
||||
import { Teams10DataSource } from './data.source';
|
||||
import './less/antMotionStyle.less';
|
||||
|
||||
let isMobile;
|
||||
enquireScreen((b) => {
|
||||
isMobile = b;
|
||||
});
|
||||
|
||||
const { location } = window;
|
||||
|
||||
export default class Home extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isMobile,
|
||||
show: !location.port, // 如果不是 dva 2.0 请删除
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// 适配手机屏幕;
|
||||
enquireScreen((b) => {
|
||||
this.setState({ isMobile: !!b });
|
||||
});
|
||||
// dva 2.0 样式在组件渲染之后动态加载，导致滚动组件不生效；线上不影响；
|
||||
/* 如果不是 dva 2.0 请删除 start */
|
||||
if (location.port) {
|
||||
// 样式 build 时间在 200-300ms 之间;
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
show: true,
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
/* 如果不是 dva 2.0 请删除 end */
|
||||
}
|
||||
|
||||
render() {
|
||||
const children = [
|
||||
<Teams1
|
||||
id="Teams1_0"
|
||||
key="Teams1_0"
|
||||
dataSource={Teams10DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
];
|
||||
return (
|
||||
<div
|
||||
className="templates-wrapper"
|
||||
ref={(d) => {
|
||||
this.dom = d;
|
||||
}}
|
||||
>
|
||||
{/* 如果不是 dva 2.0 替换成 {children} start */}
|
||||
{this.state.show && children}
|
||||
{/* 如果不是 dva 2.0 替换成 {children} end */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,17 @@
|
||||
@import './common.less';
|
||||
@import './custom.less';
|
||||
@import './point.less';
|
||||
@import './content.less';
|
||||
@import './teams1.less';
|
||||
@import './edit.less';
|
||||
@import './nav3.less';
|
||||
@import './banner3.less';
|
||||
@import './feature2.less';
|
||||
@import './feature1.less';
|
||||
@import './content3.less';
|
||||
@import './feature8.less';
|
||||
@import './feature6.less';
|
||||
@import './content5.less';
|
||||
@import './content9.less';
|
||||
@import './footer0.less';
|
||||
@import './edit.less';
|
||||
@import'./teams1.less';
|
||||
@import './content11.less';
|
||||
@@ -0,0 +1,91 @@
|
||||
@banner3: banner3;
|
||||
.@{banner3} {
|
||||
// 如果在第一屏且导航位置为 relative, 一屏为 height: calc(~"100vh - 64px");
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
border-color: #666;
|
||||
background-image: url("https://gw.alipayobjects.com/zos/rmsportal/xTPkCNNLOnTEbGgVZOpE.jpg");
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
& &-text-wrapper {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: @template-text-color-light;
|
||||
max-width: 845px;
|
||||
height: 500px;
|
||||
width: 80%;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
>.queue-anim-leaving {
|
||||
position: relative !important;
|
||||
}
|
||||
}
|
||||
& &-slogan {
|
||||
font-size: 68px;
|
||||
line-height: 80px;
|
||||
text-indent: 2px;
|
||||
font-weight: 600;
|
||||
margin: 26px auto 38px;
|
||||
overflow: hidden;
|
||||
}
|
||||
& &-name-en {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
font-weight: 400;
|
||||
}
|
||||
& &-name {
|
||||
font-size: 24px;
|
||||
overflow: hidden;
|
||||
opacity: 0.8;
|
||||
}
|
||||
& &-button {
|
||||
display: block;
|
||||
margin: 72px auto 0;
|
||||
background: rgb(3, 67, 101);
|
||||
background: -moz-linear-gradient(left, rgba(3, 67, 101, 1) 0%, rgba(0, 27, 51, 1) 100%);
|
||||
background: linear-gradient(to right, rgba(3, 67, 101, 1) 0%, rgba(0, 27, 51, 1) 100%);
|
||||
box-shadow: 0 8px 16px #0a52ab;
|
||||
border: none;
|
||||
transition: background .45s @ease-out;
|
||||
width: 132px;
|
||||
line-height: 42px;
|
||||
height: 42px;
|
||||
border-radius: 42px;
|
||||
}
|
||||
& &-time {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{banner3} {
|
||||
background-attachment: inherit;
|
||||
& &-text-wrapper {
|
||||
width: 90%;
|
||||
height: 50%;
|
||||
}
|
||||
& &-name-en {
|
||||
font-size: 12px;
|
||||
}
|
||||
& &-slogan {
|
||||
font-size: 24px;
|
||||
line-height: 1.5;
|
||||
margin: 12px 0;
|
||||
}
|
||||
& &-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
@content11: content11;
|
||||
.@{content11}-wrapper {
|
||||
height: 480px;
|
||||
background: url("https://gw.alipayobjects.com/zos/rmsportal/ZsWYzLOItgeaWDSsXdZd.svg") no-repeat bottom;
|
||||
background-size: cover;
|
||||
background-size: 100%;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
padding-top: 96px;
|
||||
&.home-page-wrapper {
|
||||
.title-wrapper {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
box-shadow: 0 8px 16px #0554b7;
|
||||
background: linear-gradient(to right, #05cbff, #1e5aff) !important;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
font-size: 14px;
|
||||
border: 0;
|
||||
border-radius: 21px;
|
||||
color: #fff;
|
||||
width: 128px;
|
||||
padding: 0 15px;
|
||||
display: inline-block;
|
||||
transition: transform .3s, box-shadow .3s;
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 20px #0554b7;
|
||||
}
|
||||
&:active {
|
||||
transform: translateY(4px);
|
||||
box-shadow: 0 4px 8px #0554b7;
|
||||
}
|
||||
}
|
||||
.title-content {
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{content11}-wrapper {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
@content5: content5;
|
||||
.@{content5}-wrapper {
|
||||
background-color: #fafafa;
|
||||
min-height: 720px;
|
||||
.@{content5} {
|
||||
>p {
|
||||
text-align: center;
|
||||
}
|
||||
&-img-wrapper {
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
.block {
|
||||
margin-bottom: 24px;
|
||||
.content5-block-content {
|
||||
display: block;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.page-pro();
|
||||
border: none;
|
||||
transition: box-shadow .3s @ease-out, transform .3s @ease-out;
|
||||
& > span {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
display: block;
|
||||
background: @line-color;
|
||||
padding: 0px;
|
||||
}
|
||||
& p {
|
||||
width: 100%;
|
||||
line-height: 30px;
|
||||
}
|
||||
&:hover {
|
||||
& p {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{content5}-wrapper {
|
||||
height: 2000px;
|
||||
overflow: hidden;
|
||||
.@{content5} {
|
||||
ul {
|
||||
li {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 2%;
|
||||
span {
|
||||
height: 168px;
|
||||
}
|
||||
p {
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
@content9: content9;
|
||||
@text-color: rgba(0, 0, 0, 0.85);
|
||||
@text-color2: #697b8c;
|
||||
.@{content9}-wrapper {
|
||||
padding-bottom: 64px;
|
||||
&.home-page-wrapper {
|
||||
overflow: initial;
|
||||
}
|
||||
.@{content9} {
|
||||
min-height: 800px;
|
||||
padding: 64px 0 0;
|
||||
}
|
||||
.timeline {
|
||||
position: relative;
|
||||
&:before {
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: ~"calc(100% - 108px)";
|
||||
margin: 34px 0;
|
||||
border-left: 2px #ebedf0 dashed;
|
||||
}
|
||||
}
|
||||
.block-wrapper {
|
||||
color: @text-color;
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-bottom: 70px;
|
||||
min-height: 160px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.image-wrapper,
|
||||
.text-wrapper {
|
||||
width: 50%;
|
||||
}
|
||||
.image-wrapper {
|
||||
text-align: center;
|
||||
.block-img,
|
||||
.name-wrapper {
|
||||
float: right;
|
||||
clear: both;
|
||||
width: 262px;
|
||||
margin: auto;
|
||||
}
|
||||
.block-img {
|
||||
height: 98px;
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.name-wrapper {
|
||||
margin: 16px 0 0;
|
||||
.block-name {
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.block-post {
|
||||
font-size: 12px;
|
||||
color: @text-color2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-wrapper {
|
||||
padding-left: 40px;
|
||||
.block-time {
|
||||
font-size: 12px;
|
||||
color: @text-color2;
|
||||
line-height: 18px;
|
||||
min-height: 18px;
|
||||
}
|
||||
.block-title {
|
||||
margin: 8px 0 12px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
min-height: 18px;
|
||||
}
|
||||
.block-icon {
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
transform: translateX(~"calc(-50% + 1px)");
|
||||
}
|
||||
.block-content {
|
||||
width: 300px;
|
||||
color: #314659;
|
||||
font-size: 12px;
|
||||
min-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{content9}-wrapper {
|
||||
padding-bottom: 0;
|
||||
.@{content9} {
|
||||
padding: 64px 24px;
|
||||
}
|
||||
.timeline {
|
||||
&:before {
|
||||
left: 0;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.block-wrapper {
|
||||
display: block;
|
||||
min-height: 100px;
|
||||
margin-bottom: 54px;
|
||||
}
|
||||
.image-wrapper,
|
||||
.text-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.image-wrapper {
|
||||
.block-img {
|
||||
display: none;
|
||||
}
|
||||
.name-wrapper {
|
||||
text-align: left;
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding-left: 40px;
|
||||
margin: auto;
|
||||
}
|
||||
.block-name, .block-post {
|
||||
display: inline-block;
|
||||
}
|
||||
.block-name {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.text-wrapper {
|
||||
.block-content {
|
||||
display: none;
|
||||
}
|
||||
.block-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+299
-1
@@ -1,5 +1,253 @@
|
||||
#Content3_0 .ant-col > .content3-text > .k6bwga0pdy-editor_css {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
opacity: 0.35;
|
||||
border-top-color: rgba(150, 79, 79, 0);
|
||||
border-right-color: rgba(134, 55, 55, 0);
|
||||
border-bottom-color: rgba(134, 55, 55, 0);
|
||||
border-left-color: rgba(211, 57, 57, 0);
|
||||
}
|
||||
#Content3_0 .ant-row > .ant-col > .k6bwkyqmmk8-editor_css {
|
||||
background-color: rgba(202, 36, 36, 0);
|
||||
background-image: url('https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg');
|
||||
background-attachment: scroll;
|
||||
background-blend-mode: normal;
|
||||
background-position: 0% 0%;
|
||||
background-repeat: repeat;
|
||||
background-size: auto;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
#Content3_0 div > .ant-row > .k6bwib6y3rr-editor_css {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: rgb(42, 128, 202);
|
||||
text-decoration: line-through;
|
||||
background-color: rgba(195, 67, 67, 0);
|
||||
background-image: url('https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg');
|
||||
background-attachment: scroll;
|
||||
background-blend-mode: normal;
|
||||
background-position: 0% 0%;
|
||||
background-repeat: repeat;
|
||||
background-size: auto;
|
||||
background-clip: padding-box;
|
||||
border-top-style: dashed;
|
||||
}
|
||||
#Banner3_1 .banner3-text-wrapper > .ant-btn {
|
||||
background-color: #cf2892;
|
||||
background-image: linear-gradient(
|
||||
0rad,
|
||||
rgb(255, 0, 0) 10%,
|
||||
rgb(255, 0, 0) 29.71153846153846%,
|
||||
#da2626 45.4223076923077%,
|
||||
white 100%
|
||||
);
|
||||
background-attachment: scroll;
|
||||
background-blend-mode: normal;
|
||||
background-position: 0% 0%;
|
||||
background-repeat: repeat;
|
||||
background-size: auto;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
#Banner3_1 .k6bxcwa6wb-editor_css {
|
||||
box-shadow: 5px 5px 5px #108ee9;
|
||||
}
|
||||
#Banner3_1 .banner3-text-wrapper > .k6bx9bxsgw-editor_css {
|
||||
background-clip: padding-box;
|
||||
text-decoration: underline;
|
||||
text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
#Banner3_1 .banner3-text-wrapper > .k6bx9qqmas-editor_css {
|
||||
color: rgb(255, 0, 0);
|
||||
margin: 100px 100px;
|
||||
}
|
||||
#Banner3_1 .banner3-text-wrapper > .k6bxcnb8hlg-editor_css {
|
||||
font-family: Tahoma;
|
||||
font-size: 23px;
|
||||
font-weight: bold;
|
||||
color: #e9e9e9;
|
||||
background-color: rgb(251, 251, 251);
|
||||
background-image: linear-gradient(
|
||||
225deg,
|
||||
#f04134 12.5%,
|
||||
#00a854 25%,
|
||||
#108ee9 37.5%,
|
||||
#f5317f 50%,
|
||||
#f56a00 62.5%,
|
||||
#7265e6 75%,
|
||||
#ffbf00 87.5%,
|
||||
#00a2ae 99.54%,
|
||||
#00a2ae 100%,
|
||||
rgb(0, 27, 51) 100%,
|
||||
black 100%,
|
||||
black 100%,
|
||||
black 100%,
|
||||
black 100%,
|
||||
black 100%,
|
||||
black 100%,
|
||||
black 100%,
|
||||
black 100%,
|
||||
#f04134 100%,
|
||||
#108ee9 100%,
|
||||
black 100%
|
||||
);
|
||||
background-blend-mode: normal;
|
||||
background-clip: padding-box;
|
||||
box-shadow: 0px 8px 16px rgb(171, 21, 10);
|
||||
}
|
||||
#Content3_0 .ant-col > .content3-text > .k6bypeippkr-editor_css {
|
||||
margin: 0px;
|
||||
}
|
||||
#Content3_0 .ant-row > .ant-col > .k6byzxwmha-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Content3_0 .ant-row > .ant-col > .k6byp0r4zad-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Content3_0 .ant-row > .ant-col > .k6bz0rscbc6-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Content3_0 .ant-row > .ant-col > .k6byxtosuua-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Content3_0 .ant-row > .ant-col > .k6bz0x5q5u-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Content3_0 .home-page > .title-wrapper > .k6byq9vtkee-editor_css {
|
||||
margin: 0px 0 16px;
|
||||
}
|
||||
#Feature2_0 .ant-row > .ant-col > .k6bz79j5xeo-editor_css {
|
||||
text-align: center;
|
||||
}
|
||||
#Feature2_0 .ant-row > .ant-col > .k6bzcb3z43g-editor_css {
|
||||
}
|
||||
#Content3_0 .home-page > .title-wrapper > .k6bz1fy4zto-editor_css {
|
||||
font-size: 15px;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c0oc6qv0m-editor_css {
|
||||
font-size: 16px;
|
||||
padding: 30px;
|
||||
}
|
||||
#Feature8_0 div > .ant-row-flex > .k6c0r7negkf-editor_css {
|
||||
margin: 36px 0px;
|
||||
padding: 0 60px;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c0s91863l-editor_css {
|
||||
margin: 0px;
|
||||
padding: 20px;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c0vx6j656-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c0s334dxi-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c0x19mrup-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c0y0a2yx-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c0x9xg18b-editor_css {
|
||||
font-weight: 300;
|
||||
color: #404040;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c10o2f0x-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c12xz3kb-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c0huzztn9-editor_css {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c169bqlul-editor_css {
|
||||
font-size: 20px;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c16ctkdmf-editor_css {
|
||||
font-size: 20px;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c17cdd2tk-editor_css {
|
||||
font-size: 20px;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c17hbe4aq-editor_css {
|
||||
font-size: 20px;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c17kho4rt-editor_css {
|
||||
font-size: 20px;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c17nnk41k-editor_css {
|
||||
font-size: 20px;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c18wg896n-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c18yxsvf-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c1dfyt0he-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c1dj5lecd-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c1crpbwn-editor_css {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c1dlcixg-editor_css {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c2haip0st-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c2h8wti1-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c2hgg3bfc-editor_css {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c2ijput1f-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c2ibp6dfh-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Feature8_0 .ant-col > .feature8-block-child > .k6c2imvlib-editor_css {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
#Content3_0 .k6c2jyfzwv-editor_css {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
#Content3_0 div > .ant-row > .k6c2kk8agk-editor_css {
|
||||
border-top-style: dashed;
|
||||
border-right-style: dashed;
|
||||
border-bottom-style: dashed;
|
||||
border-left-style: dashed;
|
||||
border-color: rgba(189, 25, 25, 0);
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
#Content9_0 .timeline > .block-wrapper > .k6c37bgt0io-editor_css {
|
||||
width: 100%;
|
||||
}
|
||||
#Content9_0 .block-wrapper > .image-wrapper > .k6c3b63w63l-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Content9_0 .image-wrapper > .name-wrapper > .k6c3bvphdf-editor_css {
|
||||
display: none;
|
||||
}
|
||||
#Content9_0 .image-wrapper > .name-wrapper > .k6c3bgi5wr-editor_css {
|
||||
font-size: 20px;
|
||||
}
|
||||
#Teams1_0 .ant-row > .ant-col > .k6d84n0pi88-editor_css {
|
||||
width: 20px;
|
||||
width: 320px;
|
||||
clear: both;
|
||||
}
|
||||
#Teams1_0 .ant-row > .ant-col > .k6d8cd2spqg-editor_css {
|
||||
@@ -11,3 +259,53 @@
|
||||
#Teams1_0 .ant-row > .ant-col > .k6d8cnw0kx-editor_css {
|
||||
font-size: 20px;
|
||||
}
|
||||
#Content11_0 .title-wrapper > .k6lxsmos5a-editor_css {
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
padding: 0 30px 0 10px;
|
||||
}
|
||||
#Content11_0 .title-wrapper > .k6lxlv638d8-editor_css {
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
padding: 0 10px;
|
||||
}
|
||||
#Content11_0 .title-wrapper > .k6lxnkyb05e-editor_css {
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
padding: 0 30px 0 10px;
|
||||
}
|
||||
#Content11_0 .title-wrapper > .k6lxrmle9fu-editor_css {
|
||||
font-size: 18px;
|
||||
text-align: left;
|
||||
padding: 0 30px 0 10px;
|
||||
}
|
||||
#Content11_0 .title-wrapper > .k6ly1aw82ke-editor_css {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: sticky;
|
||||
top: 200px;
|
||||
left: 800px;
|
||||
}
|
||||
#Content11_0 .title-wrapper > .k6ly6kbgb-editor_css {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
left: 100px;
|
||||
}
|
||||
#Content11_0 .title-wrapper > .k6lycb5l8ia-editor_css {
|
||||
height: 120px;
|
||||
padding: 50px 0px 0px;
|
||||
}
|
||||
#Content11_0.k6lxojfwiy-editor_css {
|
||||
height: 1300px;
|
||||
padding: 96px 30px 0px 10px;
|
||||
}
|
||||
#Feature1_0 .ant-row > .ant-col > .k6lymhkssyk-editor_css {
|
||||
font-size: 16px;
|
||||
}
|
||||
#Feature1_1 .ant-row > .ant-col > .k6lypevq23b-editor_css {
|
||||
font-size: 16px;
|
||||
}
|
||||
#Feature1_2 .ant-row > .ant-col > .k6lyqr8k4ri-editor_css {
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
@content1: content1;
|
||||
.@{content1}-wrapper {
|
||||
height: 360px;
|
||||
.@{content1} {
|
||||
height: 100%;
|
||||
padding: 0 24px;
|
||||
&-img {
|
||||
height: 100%;
|
||||
transform-origin: top;
|
||||
padding: 0 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
span {
|
||||
display: block;
|
||||
width: 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
@content2: content2;
|
||||
.@{content2}-wrapper {
|
||||
height: 360px;
|
||||
.@{content2} {
|
||||
height: 100%;
|
||||
padding: 0 24px;
|
||||
&-img {
|
||||
height: 100%;
|
||||
transform-origin: top;
|
||||
padding: 0 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
span {
|
||||
display: block;
|
||||
width: 250px;
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-text {
|
||||
padding: 0 32px;
|
||||
height: 100%;
|
||||
.@{content2}-content,
|
||||
.@{content2}-title {
|
||||
position: relative !important;
|
||||
}
|
||||
.@{content2}-title {
|
||||
font-size: 32px;
|
||||
font-weight: normal;
|
||||
color: #404040;
|
||||
margin-top: 120px;
|
||||
}
|
||||
.@{content2}-content {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{content2}-wrapper {
|
||||
height: 600px;
|
||||
.@{content2} {
|
||||
&-img {
|
||||
height: 200px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
margin-top: 64px;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
height: 200px;
|
||||
line-height: 200px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
&-text {
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
.@{content2}-content,
|
||||
.@{content2}-title {
|
||||
width: 100%;
|
||||
top: auto;
|
||||
}
|
||||
.@{content2}-title {
|
||||
margin: 32px auto 16px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
@feature6: feature6;
|
||||
|
||||
.@{feature6} {
|
||||
&-wrapper {
|
||||
min-height: 360px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
&.home-page-wrapper {
|
||||
.home-page {
|
||||
padding: 64px 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: inline-block;
|
||||
|
||||
&-wrapper {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
&-text {
|
||||
display: inline-block;
|
||||
margin: 0 72px;
|
||||
font-size: 24px;
|
||||
color: @text-color;
|
||||
transition: color .45s @ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-bar {
|
||||
height: 6px;
|
||||
background: @primary-color;
|
||||
width: 20%;
|
||||
margin: auto;
|
||||
display: block;
|
||||
|
||||
&-wrapper {
|
||||
position: relative;
|
||||
margin-top: 8px;
|
||||
transition: left .45s @ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-number,
|
||||
&-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-number {
|
||||
font-size: 48px;
|
||||
color: @primary-color;
|
||||
font-weight: 600;
|
||||
|
||||
&-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&-unit {
|
||||
font-size: 16px;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.ant-carousel {
|
||||
.slick-dots-bottom {
|
||||
bottom: -24px;
|
||||
}
|
||||
|
||||
.slick-dots li {
|
||||
button {
|
||||
background: fade(@primary-color, 30);
|
||||
}
|
||||
|
||||
&.slick-active button {
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{feature6}-wrapper {
|
||||
padding-bottom: 0;
|
||||
min-height: 580px;
|
||||
|
||||
&.home-page-wrapper {
|
||||
.home-page {
|
||||
padding: 56px 24px 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{feature6}-title {
|
||||
&-text {
|
||||
margin: 0 14px;
|
||||
}
|
||||
|
||||
&-bar {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.@{feature6}-number-wrapper {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,217 @@
|
||||
@feature8: feature8;
|
||||
|
||||
.@{feature8} {
|
||||
&-wrapper {
|
||||
min-height: 680px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
background-color: fade(#fdfdfd, 30);
|
||||
background-image: linear-gradient(360deg, fade(#c1daff, 30) 0%, fade(#fdfdfd, 30) 80%);
|
||||
|
||||
&.home-page-wrapper {
|
||||
.home-page {
|
||||
padding: 64px 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
|
||||
&-wrapper {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
&-h1 {
|
||||
font-size: 32px;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&-content {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-carousel {
|
||||
width: ~"calc(100% + 72px)";
|
||||
margin-left: -36px;
|
||||
}
|
||||
|
||||
&-carousel-title {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
|
||||
&-block {
|
||||
display: inline-block;
|
||||
color: fade(@text-color, 45);
|
||||
transition: color .45s;
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
color: @text-color;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 70%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: #d8d8d8;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-block {
|
||||
margin-top: 48px;
|
||||
|
||||
&-wrapper {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
&-row {
|
||||
padding: 0 36px;
|
||||
}
|
||||
|
||||
&-col {
|
||||
text-align: center;
|
||||
margin: 36px 0;
|
||||
position: relative;
|
||||
|
||||
&:last-child {
|
||||
.@{feature8}-block-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-child {
|
||||
padding: 36px 24px 24px;
|
||||
border-radius: 6px;
|
||||
|
||||
height: 100%;
|
||||
transition: box-shadow @animate-duration @ease-in-out, background @animate-duration @ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: #f6f9ff;
|
||||
box-shadow: 0 12px 36px fade(#646488, 15);
|
||||
|
||||
.@{feature8}-block-content {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-image {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: @text-color;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
opacity: 1;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: fade(@text-color, 65);
|
||||
margin-top: 36px;
|
||||
text-align: left;
|
||||
transition: opacity @animate-duration @ease-in-out;
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 16px;
|
||||
top: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
&-button {
|
||||
text-align: center;
|
||||
|
||||
&-wrapper {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
padding: 8px 40px;
|
||||
border-radius: 20px;
|
||||
line-height: 1.5;
|
||||
height: 40px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
background-color: #3c89f6;
|
||||
background-image: linear-gradient(135deg, #82b5ff 0%, #3c89f6 100%);
|
||||
box-shadow: 0 9px 22px fade(#5f9bf1, 35);
|
||||
transition: color .45s @ease-in-out, box-shadow .45s @ease-in-out, transform .45s @ease-in-out;
|
||||
will-change: transform, box-shadow;
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 14px 26px fade(#5f9bf1, 40);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{feature8} {
|
||||
&-wrapper {
|
||||
padding-bottom: 0;
|
||||
min-height: 1540px;
|
||||
|
||||
&.home-page-wrapper {
|
||||
.home-page {
|
||||
padding: 56px 24px 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-carousel-title {
|
||||
font-size: 16px;
|
||||
|
||||
&-block {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-block {
|
||||
&-child {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
background-color: #f6f9ff;
|
||||
box-shadow: 0 12px 36px fade(#646488, 15);
|
||||
}
|
||||
|
||||
&-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
bottom: -40px;
|
||||
top: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.footer0-wrapper {
|
||||
background-color: @template-bg-color;
|
||||
height: 80px;
|
||||
overflow: hidden;
|
||||
.footer0 {
|
||||
height: 100%;
|
||||
padding: 0 24px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
color: @template-footer-text-color;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.footer0-wrapper {
|
||||
.footer0 {
|
||||
font-size: 12px;
|
||||
&.home-page {
|
||||
padding: 0;
|
||||
}
|
||||
>div {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
@header3: header3;
|
||||
|
||||
.@{header3} {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
box-shadow: 0 4px 6px fade(#000, 5);
|
||||
position: relative;
|
||||
top: 0;
|
||||
|
||||
.home-page {
|
||||
padding: 0 0px;
|
||||
}
|
||||
|
||||
&-logo {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
|
||||
line-height: 60px;
|
||||
|
||||
& img {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
& a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
float: right;
|
||||
.ant-menu-horizontal {
|
||||
border-bottom: none;
|
||||
}
|
||||
.ant-menu {
|
||||
line-height: 62px;
|
||||
height: 64px;
|
||||
background: transparent;
|
||||
|
||||
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: @text-color;
|
||||
margin-left: 46px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
font-size: 12px;
|
||||
color: fade(@text-color, 75);
|
||||
margin-left: 46px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{header3} {
|
||||
&-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;
|
||||
background: #fff;
|
||||
|
||||
& 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: @template-nav-bg-color;
|
||||
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;
|
||||
|
||||
.@{header3}-mobile-menu {
|
||||
em {
|
||||
&:nth-child(1) {
|
||||
transform: translateY(6px) rotate(45deg);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
transform: translateY(-6px) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.@{header3}-menu {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
&-item-block {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
@import './custom.less';
|
||||
@point: point;
|
||||
.@{point} {
|
||||
float: left;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
opacity: .5;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
transition: opacity .3s @ease-out, background .3s @ease-out;
|
||||
margin: 6px auto;
|
||||
background: @primary-color;
|
||||
border-radius: 100%;
|
||||
&.active {
|
||||
opacity: 1;
|
||||
background: @primary-color;
|
||||
}
|
||||
&-wrapper {
|
||||
position: fixed;
|
||||
z-index: 9998;
|
||||
top: 0;
|
||||
right: 16px;
|
||||
width: 10px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
&-left {
|
||||
left: 16px;
|
||||
}
|
||||
&-rect {
|
||||
border-radius: 0;
|
||||
}
|
||||
&-prismatic {
|
||||
border-radius: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&-stroke {
|
||||
border: 2px solid @primary-color;
|
||||
background: transparent;
|
||||
}
|
||||
&-small {
|
||||
width: 6px;
|
||||
&.point {
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
&-large {
|
||||
width: 10px;
|
||||
&.point {
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.@{point}-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
min-height: 446px;
|
||||
overflow: hidden;
|
||||
.@{teams1} {
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
height: 100%;
|
||||
padding: 64px 24px;
|
||||
> .title-wrapper {
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
/* eslint no-undef: 0 */
|
||||
/* eslint arrow-parens: 0 */
|
||||
import React from 'react';
|
||||
import { enquireScreen } from 'enquire-js';
|
||||
|
||||
import Nav3 from './Nav3';
|
||||
import Banner3 from './Banner3';
|
||||
import Feature2 from './Feature2';
|
||||
import Feature1 from './Feature1';
|
||||
import Content3 from './Content3';
|
||||
import Feature8 from './Feature8';
|
||||
import Feature6 from './Feature6';
|
||||
import Content5 from './Content5';
|
||||
import Content9 from './Content9';
|
||||
import Footer0 from './Footer0';
|
||||
import Point from './Point';
|
||||
|
||||
import {
|
||||
Nav30DataSource,
|
||||
Banner31DataSource,
|
||||
Feature20DataSource,
|
||||
Feature10DataSource,
|
||||
Content30DataSource,
|
||||
Feature80DataSource,
|
||||
Feature60DataSource,
|
||||
Content50DataSource,
|
||||
Content90DataSource,
|
||||
Footer00DataSource,
|
||||
|
||||
|
||||
} from './data.source';
|
||||
import './less/antMotionStyle.less';
|
||||
|
||||
let isMobile;
|
||||
enquireScreen((b) => {
|
||||
isMobile = b;
|
||||
});
|
||||
|
||||
const { location } = window;
|
||||
|
||||
export default class Home extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isMobile,
|
||||
show: !location.port, // 如果不是 dva 2.0 请删除
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// 适配手机屏幕;
|
||||
enquireScreen((b) => {
|
||||
this.setState({ isMobile: !!b });
|
||||
});
|
||||
// dva 2.0 样式在组件渲染之后动态加载，导致滚动组件不生效；线上不影响；
|
||||
/* 如果不是 dva 2.0 请删除 start */
|
||||
if (location.port) {
|
||||
// 样式 build 时间在 200-300ms 之间;
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
show: true,
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
/* 如果不是 dva 2.0 请删除 end */
|
||||
}
|
||||
|
||||
render() {
|
||||
const children = [
|
||||
<Nav3
|
||||
id="Nav3_0"
|
||||
key="Nav3_0"
|
||||
dataSource={Nav30DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Banner3
|
||||
id="Banner3_1"
|
||||
key="Banner3_1"
|
||||
dataSource={Banner31DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Feature2
|
||||
id="Feature2_0"
|
||||
key="Feature2_0"
|
||||
dataSource={Feature20DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Feature1
|
||||
id="Feature1_0"
|
||||
key="Feature1_0"
|
||||
dataSource={Feature10DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Content3
|
||||
id="Content3_0"
|
||||
key="Content3_0"
|
||||
dataSource={Content30DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Feature8
|
||||
id="Feature8_0"
|
||||
key="Feature8_0"
|
||||
dataSource={Feature80DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Feature6
|
||||
id="Feature6_0"
|
||||
key="Feature6_0"
|
||||
dataSource={Feature60DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Content5
|
||||
id="Content5_0"
|
||||
key="Content5_0"
|
||||
dataSource={Content50DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Content9
|
||||
id="Content9_0"
|
||||
key="Content9_0"
|
||||
dataSource={Content90DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
|
||||
<Footer0
|
||||
id="Footer0_0"
|
||||
key="Footer0_0"
|
||||
dataSource={Footer00DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>, // 导航和页尾不进入锚点区，如果需要，自行添加;
|
||||
<Point
|
||||
key="list"
|
||||
data={[
|
||||
'Nav3_0',
|
||||
'Banner3_1',
|
||||
'Feature2_0',
|
||||
'Feature1_0',
|
||||
'Content3_0',
|
||||
'Feature8_0',
|
||||
'Feature6_0',
|
||||
'Content5_0',
|
||||
'Content9_0',
|
||||
|
||||
'Footer0_0',
|
||||
]}
|
||||
/>,
|
||||
];
|
||||
return (
|
||||
<div
|
||||
className="templates-wrapper"
|
||||
ref={(d) => {
|
||||
this.dom = d;
|
||||
}}
|
||||
>
|
||||
{/* 如果不是 dva 2.0 替换成 {children} start */}
|
||||
{this.state.show && children}
|
||||
{/* 如果不是 dva 2.0 替换成 {children} end */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user