Improved Landing page
This commit is contained in:
Patrick Fic
135
client/src/landing/Nav0.jsx
Normal file
135
client/src/landing/Nav0.jsx
Normal file
@@ -0,0 +1,135 @@
|
||||
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"
|
||||
>
|
||||
{navChildren}
|
||||
</Menu>
|
||||
</TweenOne>
|
||||
</div>
|
||||
</TweenOne>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@@ -1,80 +1,87 @@
|
||||
import React from "react";
|
||||
import i18n from "../translations/i18n";
|
||||
import ImexOnlineLogoLight from "../assets/ImEX Online Logo.png";
|
||||
import ImexOnlineLogoDark from "../assets/ImEX Online Logo - Dark.png";
|
||||
import ImexOnlineBannerLogo from "../assets/banner-logo.png";
|
||||
import TechnologySvg from "../assets/icons/technology.svg";
|
||||
export const Nav00DataSource = {
|
||||
wrapper: { className: "header0 home-page-wrapper" },
|
||||
page: { className: "home-page" },
|
||||
logo: {
|
||||
className: "header0-logo",
|
||||
children: "https://os.alipayobjects.com/rmsportal/mlcYmsRilwraoAe.svg",
|
||||
children: ImexOnlineLogoLight,
|
||||
},
|
||||
Menu: {
|
||||
className: "header0-menu",
|
||||
children: [
|
||||
{
|
||||
name: "item0",
|
||||
className: "header0-item",
|
||||
children: {
|
||||
href: "#",
|
||||
children: [{ children: "导航一", name: "text" }],
|
||||
},
|
||||
subItem: [
|
||||
{
|
||||
name: "sub0",
|
||||
className: "item-sub",
|
||||
children: {
|
||||
className: "item-sub-item",
|
||||
children: [
|
||||
{
|
||||
name: "image0",
|
||||
className: "item-image",
|
||||
children:
|
||||
"https://gw.alipayobjects.com/zos/rmsportal/ruHbkzzMKShUpDYMEmHM.svg",
|
||||
},
|
||||
{
|
||||
name: "title",
|
||||
className: "item-title",
|
||||
children: "Ant Design",
|
||||
},
|
||||
{
|
||||
name: "content",
|
||||
className: "item-content",
|
||||
children: "企业级 UI 设计体系",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "sub1",
|
||||
className: "item-sub",
|
||||
children: {
|
||||
className: "item-sub-item",
|
||||
children: [
|
||||
{
|
||||
name: "image0",
|
||||
className: "item-image",
|
||||
children:
|
||||
"https://gw.alipayobjects.com/zos/rmsportal/ruHbkzzMKShUpDYMEmHM.svg",
|
||||
},
|
||||
{
|
||||
name: "title",
|
||||
className: "item-title",
|
||||
children: "Ant Design",
|
||||
},
|
||||
{
|
||||
name: "content",
|
||||
className: "item-content",
|
||||
children: "企业级 UI 设计体系",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// name: "item0",
|
||||
// className: "header0-item",
|
||||
// children: {
|
||||
// href: "#",
|
||||
// children: [{ children: "导航一", name: "text" }],
|
||||
// },
|
||||
// subItem: [
|
||||
// {
|
||||
// name: "sub0",
|
||||
// className: "item-sub",
|
||||
// children: {
|
||||
// className: "item-sub-item",
|
||||
// children: [
|
||||
// {
|
||||
// name: "image0",
|
||||
// className: "item-image",
|
||||
// children:
|
||||
// "https://gw.alipayobjects.com/zos/rmsportal/ruHbkzzMKShUpDYMEmHM.svg",
|
||||
// },
|
||||
// {
|
||||
// name: "title",
|
||||
// className: "item-title",
|
||||
// children: "Ant Design",
|
||||
// },
|
||||
// {
|
||||
// name: "content",
|
||||
// className: "item-content",
|
||||
// children: "企业级 UI 设计体系",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: "sub1",
|
||||
// className: "item-sub",
|
||||
// children: {
|
||||
// className: "item-sub-item",
|
||||
// children: [
|
||||
// {
|
||||
// name: "image0",
|
||||
// className: "item-image",
|
||||
// children:
|
||||
// "https://gw.alipayobjects.com/zos/rmsportal/ruHbkzzMKShUpDYMEmHM.svg",
|
||||
// },
|
||||
// {
|
||||
// name: "title",
|
||||
// className: "item-title",
|
||||
// children: "Ant Design",
|
||||
// },
|
||||
// {
|
||||
// name: "content",
|
||||
// className: "item-content",
|
||||
// children: "企业级 UI 设计体系",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
name: "item1",
|
||||
className: "header0-item",
|
||||
children: {
|
||||
href: "#",
|
||||
children: [{ children: "导航二", name: "text" }],
|
||||
children: [
|
||||
{ children: i18n.t("landing.labels.features"), name: "text" },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -82,34 +89,42 @@ export const Nav00DataSource = {
|
||||
className: "header0-item",
|
||||
children: {
|
||||
href: "#",
|
||||
children: [{ children: "导航三", name: "text" }],
|
||||
children: [
|
||||
{ children: i18n.t("landing.labels.pricing"), name: "text" },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "item3",
|
||||
className: "header0-item",
|
||||
children: {
|
||||
href: "#",
|
||||
children: [{ children: "导航四", name: "text" }],
|
||||
href: "/manage",
|
||||
children: [
|
||||
{ children: i18n.t("landing.labels.managemyshop"), name: "text" },
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
mobileMenu: { className: "header0-mobile-menu" },
|
||||
};
|
||||
|
||||
export const Banner00DataSource = {
|
||||
wrapper: { className: "banner0" },
|
||||
textWrapper: { className: "banner0-text-wrapper" },
|
||||
title: {
|
||||
className: "banner0-title",
|
||||
children: "https://zos.alipayobjects.com/rmsportal/HqnZZjBjWRbjyMr.png",
|
||||
children: (
|
||||
<img alt="" style={{ width: "100%" }} src={ImexOnlineBannerLogo} />
|
||||
),
|
||||
},
|
||||
content: {
|
||||
className: "banner0-content",
|
||||
children: "一个高效的页面动画解决方案",
|
||||
children: i18n.t("landing.hero.title"),
|
||||
},
|
||||
button: {
|
||||
className: "banner0-button",
|
||||
children: i18n.t("landing.hero.button"),
|
||||
},
|
||||
button: { className: "banner0-button", children: "Learn More" },
|
||||
};
|
||||
export const Content40DataSource = {
|
||||
wrapper: { className: "home-page-wrapper content4-wrapper" },
|
||||
@@ -144,7 +159,7 @@ export const Content00DataSource = {
|
||||
OverPack: { playScale: 0.3, className: "" },
|
||||
titleWrapper: {
|
||||
className: "title-wrapper",
|
||||
children: [{ name: "title", children: "产品与服务" }],
|
||||
children: [{ name: "title", children: "Feature Highlights" }],
|
||||
},
|
||||
childWrapper: {
|
||||
className: "content0-block-wrapper",
|
||||
@@ -166,9 +181,9 @@ export const Content00DataSource = {
|
||||
{
|
||||
name: "title",
|
||||
className: "content0-block-title",
|
||||
children: "一站式业务接入",
|
||||
children: "Feature Highlight 1",
|
||||
},
|
||||
{ name: "content", children: "支付、结算、核算接入产品效率翻四倍" },
|
||||
{ name: "content", children: "Feature description for this item." },
|
||||
],
|
||||
},
|
||||
},
|
||||
@@ -189,11 +204,11 @@ export const Content00DataSource = {
|
||||
{
|
||||
name: "title",
|
||||
className: "content0-block-title",
|
||||
children: "一站式事中风险监控",
|
||||
children: "Feature Highlight 2",
|
||||
},
|
||||
{
|
||||
name: "content",
|
||||
children: "在所有需求配置环节事前风险控制和质量控制能力",
|
||||
children: "Feature description for #2",
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -215,11 +230,11 @@ export const Content00DataSource = {
|
||||
{
|
||||
name: "title",
|
||||
className: "content0-block-title",
|
||||
children: "一站式数据运营",
|
||||
children: "Feature Highlight 3",
|
||||
},
|
||||
{
|
||||
name: "content",
|
||||
children: "沉淀产品接入效率和运营小二工作效率数据",
|
||||
children: "Feature description for 3.",
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -232,14 +247,16 @@ export const Content10DataSource = {
|
||||
OverPack: { className: "home-page content1", playScale: 0.3 },
|
||||
imgWrapper: { className: "content1-img", md: 10, xs: 24 },
|
||||
img: {
|
||||
children: "https://zos.alipayobjects.com/rmsportal/nLzbeGQLPyBJoli.png",
|
||||
children: TechnologySvg,
|
||||
},
|
||||
textWrapper: { className: "content1-text", md: 14, xs: 24 },
|
||||
title: { className: "content1-title", children: "企业资源管理" },
|
||||
title: {
|
||||
className: "content1-title",
|
||||
children: i18n.t("landing.bigfeature.title"),
|
||||
},
|
||||
content: {
|
||||
className: "content1-content",
|
||||
children:
|
||||
"云资源集中编排、弹性伸缩、持续发布和部署，高可用及容灾。云资源集中编排、弹性伸缩、持续发布和部署，高可用及容灾。云资源集中编排、弹性伸缩、持续发布和部署，高可用及容灾。",
|
||||
children: i18n.t("landing.bigfeature.subtitle"),
|
||||
},
|
||||
};
|
||||
export const Pricing20DataSource = {
|
||||
@@ -249,7 +266,11 @@ export const Pricing20DataSource = {
|
||||
titleWrapper: {
|
||||
className: "pricing2-title-wrapper",
|
||||
children: [
|
||||
{ name: "title", children: "价目表", className: "pricing2-title-h1" },
|
||||
{
|
||||
name: "title",
|
||||
children: i18n.t("landing.pricing.pricingtitle"),
|
||||
className: "pricing2-title-h1",
|
||||
},
|
||||
],
|
||||
},
|
||||
Table: {
|
||||
@@ -270,23 +291,23 @@ export const Pricing20DataSource = {
|
||||
},
|
||||
},
|
||||
{
|
||||
dataIndex: "free",
|
||||
key: "free",
|
||||
name: "free",
|
||||
dataIndex: "essentials",
|
||||
key: "essentials",
|
||||
name: "essentials",
|
||||
childWrapper: {
|
||||
className: "pricing2-table-name-block",
|
||||
children: [
|
||||
{
|
||||
name: "name",
|
||||
className: "pricing2-table-name",
|
||||
children: "Free",
|
||||
children: i18n.t("landing.pricing.essentials.name"),
|
||||
},
|
||||
{
|
||||
name: "content",
|
||||
className: "pricing2-table-money",
|
||||
children: "¥0",
|
||||
children: i18n.t("landing.pricing.essentials.sub"),
|
||||
},
|
||||
{ name: "button", children: { href: "#", children: "免费试用" } },
|
||||
// { name: "button", children: { href: "#", children: "免费试用" } },
|
||||
],
|
||||
},
|
||||
},
|
||||
@@ -300,14 +321,14 @@ export const Pricing20DataSource = {
|
||||
{
|
||||
name: "name",
|
||||
className: "pricing2-table-name",
|
||||
children: "Basic",
|
||||
children: i18n.t("landing.pricing.basic.name"),
|
||||
},
|
||||
{
|
||||
name: "content",
|
||||
className: "pricing2-table-money",
|
||||
children: "¥550",
|
||||
children: i18n.t("landing.pricing.basic.sub"),
|
||||
},
|
||||
{ name: "button", children: { href: "#", children: "立即购买" } },
|
||||
//{ name: "button", children: { href: "#", children: "立即购买" } },
|
||||
],
|
||||
},
|
||||
},
|
||||
@@ -321,17 +342,17 @@ export const Pricing20DataSource = {
|
||||
{
|
||||
name: "name",
|
||||
className: "pricing2-table-name",
|
||||
children: "Pro",
|
||||
children: i18n.t("landing.pricing.pro.name"),
|
||||
},
|
||||
{
|
||||
name: "content",
|
||||
className: "pricing2-table-money",
|
||||
children: "¥2,200",
|
||||
},
|
||||
{
|
||||
name: "button",
|
||||
children: { href: "#", type: "primary", children: "立即购买" },
|
||||
children: i18n.t("landing.pricing.pro.sub"),
|
||||
},
|
||||
// {
|
||||
// name: "button",
|
||||
// children: { href: "#", type: "primary", children: "立即购买" },
|
||||
// },
|
||||
],
|
||||
},
|
||||
},
|
||||
@@ -345,14 +366,14 @@ export const Pricing20DataSource = {
|
||||
{
|
||||
name: "name",
|
||||
className: "pricing2-table-name",
|
||||
children: "Unlimited",
|
||||
children: i18n.t("landing.pricing.unlimited.name"),
|
||||
},
|
||||
{
|
||||
name: "content",
|
||||
className: "pricing2-table-money",
|
||||
children: "¥5,600",
|
||||
children: i18n.t("landing.pricing.unlimited.sub"),
|
||||
},
|
||||
{ name: "button", children: { href: "#", children: "立即购买" } },
|
||||
// { name: "button", children: { href: "#", children: "立即购买" } },
|
||||
],
|
||||
},
|
||||
},
|
||||
@@ -366,25 +387,29 @@ export const Pricing20DataSource = {
|
||||
{
|
||||
className: "pricing2-table-content-name",
|
||||
name: "name",
|
||||
children: "实例系列1",
|
||||
children: "Unlimited Vehicles, Customers, and Work Orders",
|
||||
},
|
||||
{
|
||||
children: "Limited",
|
||||
children:
|
||||
"https://gw.alipayobjects.com/zos/basement_prod/14ce3060-34e6-4b30-9a45-1a6b95542310.svg",
|
||||
name: "content0",
|
||||
className: "pricing2-table-content",
|
||||
},
|
||||
{
|
||||
children: "Unlimited",
|
||||
children:
|
||||
"https://gw.alipayobjects.com/zos/basement_prod/14ce3060-34e6-4b30-9a45-1a6b95542310.svg",
|
||||
name: "content1",
|
||||
className: "pricing2-table-content",
|
||||
},
|
||||
{
|
||||
children: "Unlimited",
|
||||
children:
|
||||
"https://gw.alipayobjects.com/zos/basement_prod/14ce3060-34e6-4b30-9a45-1a6b95542310.svg",
|
||||
name: "content2",
|
||||
className: "pricing2-table-content",
|
||||
},
|
||||
{
|
||||
children: "Unlimited",
|
||||
children:
|
||||
"https://gw.alipayobjects.com/zos/basement_prod/14ce3060-34e6-4b30-9a45-1a6b95542310.svg",
|
||||
name: "content3",
|
||||
className: "pricing2-table-content",
|
||||
},
|
||||
@@ -396,25 +421,30 @@ export const Pricing20DataSource = {
|
||||
{
|
||||
className: "pricing2-table-content-name",
|
||||
name: "name",
|
||||
children: "实例系列2",
|
||||
children:
|
||||
"Access your system from anywhere (Desktop, Mobile, and Native Mobile Apps)",
|
||||
},
|
||||
{
|
||||
children: "Limited",
|
||||
children:
|
||||
"https://gw.alipayobjects.com/zos/basement_prod/14ce3060-34e6-4b30-9a45-1a6b95542310.svg",
|
||||
name: "content0",
|
||||
className: "pricing2-table-content",
|
||||
},
|
||||
{
|
||||
children: "Unlimited",
|
||||
children:
|
||||
"https://gw.alipayobjects.com/zos/basement_prod/14ce3060-34e6-4b30-9a45-1a6b95542310.svg",
|
||||
name: "content1",
|
||||
className: "pricing2-table-content",
|
||||
},
|
||||
{
|
||||
children: "Unlimited",
|
||||
children:
|
||||
"https://gw.alipayobjects.com/zos/basement_prod/14ce3060-34e6-4b30-9a45-1a6b95542310.svg",
|
||||
name: "content2",
|
||||
className: "pricing2-table-content",
|
||||
},
|
||||
{
|
||||
children: "Unlimited",
|
||||
children:
|
||||
"https://gw.alipayobjects.com/zos/basement_prod/14ce3060-34e6-4b30-9a45-1a6b95542310.svg",
|
||||
name: "content3",
|
||||
className: "pricing2-table-content",
|
||||
},
|
||||
@@ -426,7 +456,7 @@ export const Pricing20DataSource = {
|
||||
{
|
||||
className: "pricing2-table-content-name",
|
||||
name: "name",
|
||||
children: "固定宽带计费",
|
||||
children: "Included Media Storage",
|
||||
},
|
||||
{
|
||||
name: "content0",
|
||||
@@ -435,17 +465,17 @@ export const Pricing20DataSource = {
|
||||
},
|
||||
{
|
||||
name: "content1",
|
||||
children: "250GB",
|
||||
children: "100GB",
|
||||
className: "pricing2-table-content",
|
||||
},
|
||||
{
|
||||
name: "content2",
|
||||
children: "600GB",
|
||||
children: "175GB",
|
||||
className: "pricing2-table-content",
|
||||
},
|
||||
{
|
||||
name: "content3",
|
||||
children: "Unlimited",
|
||||
children: "250GB",
|
||||
className: "pricing2-table-content",
|
||||
},
|
||||
],
|
||||
@@ -456,7 +486,7 @@ export const Pricing20DataSource = {
|
||||
{
|
||||
className: "pricing2-table-content-name",
|
||||
name: "name",
|
||||
children: "闲置负载均衡",
|
||||
children: "Mobile Image Sync",
|
||||
},
|
||||
{
|
||||
children: "-",
|
||||
@@ -465,8 +495,7 @@ export const Pricing20DataSource = {
|
||||
},
|
||||
{
|
||||
name: "content1",
|
||||
children:
|
||||
"https://gw.alipayobjects.com/zos/basement_prod/14ce3060-34e6-4b30-9a45-1a6b95542310.svg",
|
||||
children: "-",
|
||||
className: "pricing2-table-content",
|
||||
},
|
||||
{
|
||||
@@ -489,7 +518,7 @@ export const Pricing20DataSource = {
|
||||
{
|
||||
className: "pricing2-table-content-name",
|
||||
name: "name",
|
||||
children: "4核",
|
||||
children: "Integrated Text Messaging",
|
||||
},
|
||||
{
|
||||
name: "content0",
|
||||
@@ -521,7 +550,7 @@ export const Pricing20DataSource = {
|
||||
{
|
||||
className: "pricing2-table-content-name",
|
||||
name: "name",
|
||||
children: "系统盘（线性计费）",
|
||||
children: "Integrated CSI",
|
||||
},
|
||||
{
|
||||
name: "content0",
|
||||
@@ -550,6 +579,7 @@ export const Pricing20DataSource = {
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Pricing11DataSource = {
|
||||
wrapper: { className: "home-page-wrapper pricing1-wrapper" },
|
||||
page: { className: "home-page pricing1" },
|
||||
@@ -943,44 +973,53 @@ export const Footer10DataSource = {
|
||||
className: "block",
|
||||
title: {
|
||||
className: "logo",
|
||||
children:
|
||||
"https://zos.alipayobjects.com/rmsportal/qqaimmXZVSwAhpL.svg",
|
||||
children: (
|
||||
<img alt="" style={{ width: "100%" }} src={ImexOnlineLogoDark} />
|
||||
),
|
||||
},
|
||||
childWrapper: {
|
||||
className: "slogan",
|
||||
children: [
|
||||
{
|
||||
name: "content0",
|
||||
children: "Animation specification and components of Ant Design.",
|
||||
children: i18n.t("landing.footer.slogan"),
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "block1",
|
||||
xs: 24,
|
||||
md: 6,
|
||||
className: "block",
|
||||
title: { children: "产品" },
|
||||
childWrapper: {
|
||||
children: [
|
||||
{ name: "link0", href: "#", children: "产品更新记录" },
|
||||
{ name: "link1", href: "#", children: "API文档" },
|
||||
{ name: "link2", href: "#", children: "快速入门" },
|
||||
{ name: "link3", href: "#", children: "参考指南" },
|
||||
],
|
||||
},
|
||||
},
|
||||
// {
|
||||
// name: "block1",
|
||||
// xs: 24,
|
||||
// md: 6,
|
||||
// className: "block",
|
||||
// title: { children: "产品" },
|
||||
// childWrapper: {
|
||||
// children: [
|
||||
// { name: "link0", href: "#", children: "产品更新记录" },
|
||||
// { name: "link1", href: "#", children: "API文档" },
|
||||
// { name: "link2", href: "#", children: "快速入门" },
|
||||
// { name: "link3", href: "#", children: "参考指南" },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
{
|
||||
name: "block2",
|
||||
xs: 24,
|
||||
md: 6,
|
||||
className: "block",
|
||||
title: { children: "关于" },
|
||||
title: { children: i18n.t("landing.footer.io.name") },
|
||||
childWrapper: {
|
||||
children: [
|
||||
{ href: "#", name: "link0", children: "FAQ" },
|
||||
{ href: "#", name: "link1", children: "联系我们" },
|
||||
{
|
||||
href: "https://help.imex.online",
|
||||
name: "link0",
|
||||
children: i18n.t("landing.footer.io.help"),
|
||||
},
|
||||
{
|
||||
href: "https://status.imex.online",
|
||||
name: "link1",
|
||||
children: i18n.t("landing.footer.io.status"),
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
@@ -989,11 +1028,29 @@ export const Footer10DataSource = {
|
||||
xs: 24,
|
||||
md: 6,
|
||||
className: "block",
|
||||
title: { children: "资源" },
|
||||
title: { children: i18n.t("landing.footer.company.name") },
|
||||
childWrapper: {
|
||||
children: [
|
||||
{ href: "#", name: "link0", children: "Ant Design" },
|
||||
{ href: "#", name: "link1", children: "Ant Motion" },
|
||||
{
|
||||
href: "/privacy",
|
||||
name: "link0",
|
||||
children: i18n.t("landing.footer.company.privacypolicy"),
|
||||
},
|
||||
{
|
||||
href: "/about",
|
||||
name: "link1",
|
||||
children: i18n.t("landing.footer.company.about"),
|
||||
},
|
||||
{
|
||||
href: "/disclaimer",
|
||||
name: "link2",
|
||||
children: i18n.t("landing.footer.company.disclaimers"),
|
||||
},
|
||||
{
|
||||
href: "https://thinkimex.com",
|
||||
name: "link3",
|
||||
children: i18n.t("landing.footer.company.contact"),
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
@@ -1005,8 +1062,8 @@ export const Footer10DataSource = {
|
||||
className: "copyright",
|
||||
children: (
|
||||
<span>
|
||||
©2018 by <a href="https://motion.ant.design">Ant Motion</a> All Rights
|
||||
Reserved
|
||||
©2021 <a href="http://imexsystems.ca">ImEX Systems</a> used under
|
||||
license.
|
||||
</span>
|
||||
),
|
||||
},
|
||||
@@ -1,182 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import TweenOne from "rc-tween-one";
|
||||
import { Anchor, Menu } from "antd";
|
||||
import { getChildrenToRender } from "./utils";
|
||||
import ImexOnlineLogoLight from "../../assets/ImEX Online Logo.png";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
const { Item, SubMenu } = Menu;
|
||||
|
||||
export default function LandingNavigator({ dataSource, isMobile, ...props }) {
|
||||
const [state, setState] = useState({ phoneOpen: undefined });
|
||||
const { t } = useTranslation();
|
||||
const { phoneOpen } = state;
|
||||
|
||||
const phoneClick = () => {
|
||||
const phoneOpen = !state.phoneOpen;
|
||||
setState({
|
||||
phoneOpen,
|
||||
});
|
||||
};
|
||||
|
||||
const moment = phoneOpen === undefined ? 300 : null;
|
||||
return (
|
||||
<TweenOne
|
||||
component="header"
|
||||
animation={{ opacity: 0, type: "from" }}
|
||||
className="header0 home-page-wrapper"
|
||||
// {...props}
|
||||
>
|
||||
<div
|
||||
//{...dataSource.page}
|
||||
className={`home-page ${dataSource.page.className}${
|
||||
phoneOpen ? " open" : ""
|
||||
}`}
|
||||
>
|
||||
<TweenOne
|
||||
animation={{ x: -30, type: "from", ease: "easeOutQuad" }}
|
||||
className="header0-logo"
|
||||
// {...dataSource.logo}
|
||||
>
|
||||
<img width="100%" src={ImexOnlineLogoLight} alt="img" />
|
||||
</TweenOne>
|
||||
{isMobile && (
|
||||
//Unknown what this menu does.
|
||||
<div
|
||||
{...dataSource.mobileMenu}
|
||||
onClick={() => {
|
||||
phoneClick();
|
||||
}}
|
||||
>
|
||||
<em />
|
||||
<em />
|
||||
<em />
|
||||
</div>
|
||||
)}
|
||||
<TweenOne
|
||||
// {...dataSource.Menu}
|
||||
className="header0-menu"
|
||||
animation={
|
||||
isMobile
|
||||
? {
|
||||
height: 0,
|
||||
duration: 300,
|
||||
onComplete: (e) => {
|
||||
if (state.phoneOpen) {
|
||||
e.target.style.height = "auto";
|
||||
}
|
||||
},
|
||||
ease: "easeInOutQuad",
|
||||
}
|
||||
: null
|
||||
}
|
||||
moment={moment}
|
||||
reverse={!!phoneOpen}
|
||||
>
|
||||
<Menu
|
||||
mode={isMobile ? "inline" : "horizontal"}
|
||||
defaultSelectedKeys={["sub0"]}
|
||||
theme="dark"
|
||||
>
|
||||
<Item className="header0-item">
|
||||
<Link to={{ hash: "#features" }} className={`header0-item-block`}>
|
||||
{t("landing.labels.features")}
|
||||
</Link>
|
||||
</Item>
|
||||
<Item className="header0-item">
|
||||
<Link to={{ hash: "#pricing" }} className={`header0-item-block`}>
|
||||
{t("landing.labels.pricing")}
|
||||
</Link>
|
||||
</Item>
|
||||
<Item className="header0-item">
|
||||
<Link to={`/manage`} className={`header0-item-block`}>
|
||||
{t("landing.labels.managemyshop")}
|
||||
</Link>
|
||||
</Item>
|
||||
</Menu>
|
||||
</TweenOne>
|
||||
</div>
|
||||
</TweenOne>
|
||||
);
|
||||
}
|
||||
|
||||
// <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>
|
||||
// subItem: [
|
||||
// {
|
||||
// name: "sub0",
|
||||
// className: "item-sub",
|
||||
// children: {
|
||||
// className: "item-sub-item",
|
||||
// children: [
|
||||
// {
|
||||
// name: "image0",
|
||||
// className: "item-image",
|
||||
// children:
|
||||
// "https://gw.alipayobjects.com/zos/rmsportal/ruHbkzzMKShUpDYMEmHM.svg",
|
||||
// },
|
||||
// {
|
||||
// name: "title",
|
||||
// className: "item-title",
|
||||
// children: "Ant Design",
|
||||
// },
|
||||
// {
|
||||
// name: "content",
|
||||
// className: "item-content",
|
||||
// children: "企业级 UI 设计体系",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: "sub1",
|
||||
// className: "item-sub",
|
||||
// children: {
|
||||
// className: "item-sub-item",
|
||||
// children: [
|
||||
// {
|
||||
// name: "image0",
|
||||
// className: "item-image",
|
||||
// children:
|
||||
// "https://gw.alipayobjects.com/zos/rmsportal/ruHbkzzMKShUpDYMEmHM.svg",
|
||||
// },
|
||||
// {
|
||||
// name: "title",
|
||||
// className: "item-title",
|
||||
// children: "Ant Design",
|
||||
// },
|
||||
// {
|
||||
// name: "content",
|
||||
// className: "item-content",
|
||||
// children: "企业级 UI 设计体系",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
@@ -1,14 +0,0 @@
|
||||
@import "./common.less";
|
||||
@import "./custom.less";
|
||||
@import "./content.less";
|
||||
@import "./LandingNavigator.less";
|
||||
@import "./banner0.less";
|
||||
@import "./content4.less";
|
||||
@import "./content0.less";
|
||||
@import "./content1.less";
|
||||
@import "./pricing2.less";
|
||||
@import "./pricing1.less";
|
||||
@import "./content3.less";
|
||||
@import "./content12.less";
|
||||
@import "./footer1.less";
|
||||
@import "./edit.less";
|
||||
@@ -1,32 +1,30 @@
|
||||
/* eslint no-undef: 0 */
|
||||
/* eslint arrow-parens: 0 */
|
||||
import React from "react";
|
||||
import { enquireScreen } from "enquire-js";
|
||||
import { Anchor } from "antd";
|
||||
import LandingNavigator from "./LandingNavigator";
|
||||
import React from "react";
|
||||
import Banner0 from "./Banner0";
|
||||
import Content4 from "./Content4";
|
||||
// import Content4 from "./Content4";
|
||||
import Content0 from "./Content0";
|
||||
import Content1 from "./Content1";
|
||||
import Pricing2 from "./Pricing2";
|
||||
import Pricing1 from "./Pricing1";
|
||||
import Content3 from "./Content3";
|
||||
import Content12 from "./Content12";
|
||||
import Footer1 from "./Footer1";
|
||||
|
||||
import {
|
||||
Nav00DataSource,
|
||||
Banner00DataSource,
|
||||
Content40DataSource,
|
||||
// Content40DataSource,
|
||||
Content00DataSource,
|
||||
Content10DataSource,
|
||||
Pricing20DataSource,
|
||||
Pricing11DataSource,
|
||||
Content30DataSource,
|
||||
Content120DataSource,
|
||||
// Pricing11DataSource,
|
||||
// Content30DataSource,
|
||||
// Content120DataSource,
|
||||
Footer10DataSource,
|
||||
Nav00DataSource,
|
||||
Pricing20DataSource,
|
||||
} from "./data.source";
|
||||
// import Pricing1 from "./Pricing1";
|
||||
// import Content3 from "./Content3";
|
||||
// import Content12 from "./Content12";
|
||||
import Footer1 from "./Footer1";
|
||||
import "./less/antMotionStyle.less";
|
||||
import Nav0 from "./Nav0";
|
||||
import Pricing2 from "./Pricing2";
|
||||
|
||||
let isMobile;
|
||||
enquireScreen((b) => {
|
||||
@@ -64,7 +62,7 @@ export default class Home extends React.Component {
|
||||
|
||||
render() {
|
||||
const children = [
|
||||
<LandingNavigator
|
||||
<Nav0
|
||||
id="Nav0_0"
|
||||
key="Nav0_0"
|
||||
dataSource={Nav00DataSource}
|
||||
@@ -76,10 +74,16 @@ export default class Home extends React.Component {
|
||||
dataSource={Banner00DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Content4
|
||||
id="Content4_0"
|
||||
key="Content4_0"
|
||||
dataSource={Content40DataSource}
|
||||
// <Content4
|
||||
// id="Content4_0"
|
||||
// key="Content4_0"
|
||||
// dataSource={Content40DataSource}
|
||||
// isMobile={this.state.isMobile}
|
||||
// />,
|
||||
<Content1
|
||||
id="Content1_0"
|
||||
key="Content1_0"
|
||||
dataSource={Content10DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Content0
|
||||
@@ -88,36 +92,30 @@ export default class Home extends React.Component {
|
||||
dataSource={Content00DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Content1
|
||||
id="Content1_0"
|
||||
key="Content1_0"
|
||||
dataSource={Content10DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Pricing2
|
||||
id="Pricing2_0"
|
||||
key="Pricing2_0"
|
||||
dataSource={Pricing20DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Pricing1
|
||||
id="Pricing1_1"
|
||||
key="Pricing1_1"
|
||||
dataSource={Pricing11DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Content3
|
||||
id="Content3_0"
|
||||
key="Content3_0"
|
||||
dataSource={Content30DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
<Content12
|
||||
id="Content12_0"
|
||||
key="Content12_0"
|
||||
dataSource={Content120DataSource}
|
||||
isMobile={this.state.isMobile}
|
||||
/>,
|
||||
// <Pricing1
|
||||
// id="Pricing1_1"
|
||||
// key="Pricing1_1"
|
||||
// dataSource={Pricing11DataSource}
|
||||
// isMobile={this.state.isMobile}
|
||||
// />,
|
||||
// <Content3
|
||||
// id="Content3_0"
|
||||
// key="Content3_0"
|
||||
// dataSource={Content30DataSource}
|
||||
// isMobile={this.state.isMobile}
|
||||
// />,
|
||||
// <Content12
|
||||
// id="Content12_0"
|
||||
// key="Content12_0"
|
||||
// dataSource={Content120DataSource}
|
||||
// isMobile={this.state.isMobile}
|
||||
// />,
|
||||
<Footer1
|
||||
id="Footer1_0"
|
||||
key="Footer1_0"
|
||||
@@ -132,10 +130,9 @@ export default class Home extends React.Component {
|
||||
this.dom = d;
|
||||
}}
|
||||
>
|
||||
<Anchor>
|
||||
{this.state.show && children}
|
||||
{/* 如果不是 dva 2.0 替换成 {children} end */}
|
||||
</Anchor>
|
||||
{/* 如果不是 dva 2.0 替换成 {children} start */}
|
||||
{this.state.show && children}
|
||||
{/* 如果不是 dva 2.0 替换成 {children} end */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
14
client/src/landing/less/antMotionStyle.less
Normal file
14
client/src/landing/less/antMotionStyle.less
Normal file
@@ -0,0 +1,14 @@
|
||||
@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';
|
||||
@@ -6,7 +6,7 @@
|
||||
position: relative;
|
||||
text-align: center;
|
||||
border-color: #666;
|
||||
background-image: url("https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg");
|
||||
background-image: url("../../assets/banner3.jpeg");
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
@@ -20,13 +20,13 @@
|
||||
font-size: 14px;
|
||||
color: @template-text-color-light;
|
||||
width: 550px;
|
||||
>.queue-anim-leaving {
|
||||
> .queue-anim-leaving {
|
||||
position: relative !important;
|
||||
}
|
||||
}
|
||||
& &-title {
|
||||
width: 350px;
|
||||
left: 30px;
|
||||
//left: 30px;
|
||||
min-height: 60px;
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
@@ -45,7 +45,7 @@
|
||||
box-shadow: 0 0 0 transparent;
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
transition: background .45s @ease-out, box-shadow .45s @ease-out;
|
||||
transition: background 0.45s @ease-out, box-shadow 0.45s @ease-out;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
Reference in New Issue
Block a user