admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Strip out landing pages.

Browse Source
This commit is contained in:
Patrick Fic
2024-02-26 12:08:33 -08:00
parent 6640ed629d
commit 8b0b37aab4
30 changed files with 0 additions and 2985 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
client/src/landing/Banner0.jsx
View File

@@ -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;

49
client/src/landing/Content0.jsx
View File

@@ -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;

70
client/src/landing/Content1.jsx
View File

@@ -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;

60
client/src/landing/Content12.jsx
View File

@@ -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;

94
client/src/landing/Content3.jsx
View File

@@ -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;

59
client/src/landing/Content4.jsx
View File

@@ -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;

68
client/src/landing/Footer1.jsx
View File

@@ -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;

134
client/src/landing/Nav0.jsx
View File

@@ -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;

73
client/src/landing/Pricing1.jsx
View File

@@ -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;

114
client/src/landing/Pricing2.jsx
View File

@@ -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;

1079
client/src/landing/data.source.js
View File

File diff suppressed because it is too large Load Diff

4
client/src/landing/documentation.md
View File

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

67
client/src/landing/index.jsx
View File

@@ -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>
);
}
}

14
client/src/landing/less/antMotionStyle.less
View File

@@ -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';

121
client/src/landing/less/banner0.less
View File

@@ -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;
}
}
}

42
client/src/landing/less/common.less
View File

@@ -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;
}

50
client/src/landing/less/content.less
View File

@@ -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;
}
}
}
}

56
client/src/landing/less/content0.less
View File

@@ -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;
}
}

89
client/src/landing/less/content1.less
View File

@@ -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;
}
}
}
}
}

60
client/src/landing/less/content12.less
View File

@@ -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;
}
}
}
}
}
}

62
client/src/landing/less/content3.less
View File

@@ -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;
}
}
}
}
}
}

42
client/src/landing/less/content4.less
View File

@@ -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;
}
}
}
}

33
client/src/landing/less/custom.less
View File

@@ -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);
}
}

0
client/src/landing/less/edit.less
View File

117
client/src/landing/less/footer1.less
View File

@@ -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%;
}
}
}
}

189
client/src/landing/less/nav0.less
View File

@@ -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;
}
}
}

101
client/src/landing/less/pricing1.less
View File

@@ -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;
}
}

59
client/src/landing/less/pricing2.less
View File

@@ -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;
}
}
}

17
client/src/landing/utils.js
View File

@@ -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);
};

1
client/src/pages/landing/landing.page.jsx
View File

@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom';
import { createStructuredSelector } from 'reselect'; import { createStructuredSelector } from 'reselect';
import { selectCurrentUser } from '../../redux/user/user.selectors'; import { selectCurrentUser } from '../../redux/user/user.selectors';
import { Spin } from 'antd'; import { Spin } from 'antd';
//import LandingPageStatic from "../../landing/index";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser, currentUser: selectCurrentUser,