Browse Source

add link

pull/8729/head
jljsj 7 years ago
committed by Wei Zhu
parent
commit
94e05ff3bc
  1. 11
      site/theme/static/home.less
  2. 9
      site/theme/template/Home/Page1.jsx
  3. 19
      site/theme/template/Home/Page2.jsx
  4. 43
      site/theme/template/Home/Page3.jsx
  5. 5
      site/theme/template/Home/index.jsx

11
site/theme/static/home.less

@ -4,8 +4,7 @@
width: 100%;
padding: 0;
overflow: hidden;
position: relative;
// will-change: transform;
position: relative; // will-change: transform;
color: @home-text-color;
font-family: 'SF UI Display', "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
@ -273,9 +272,13 @@ svg {
.page3 {
min-height: 556px;
&-block {
display: flex;
justify-content: center;
padding: 24px 32px;
a {
display: flex;
justify-content: center;
color: @home-text-color;
text-decoration: none;
}
}
&-img-wrapper,
&-text-wrapper {

9
site/theme/template/Home/Page1.jsx

@ -5,13 +5,14 @@ import { Row, Col } from 'antd';
import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { Link } from 'bisheng/router';
import { FormattedMessage } from 'react-intl';
import * as utils from '../utils';
const page1Data = [
{
img: 'https://gw.alipayobjects.com/zos/rmsportal/URIeCOKLMAbRXaeXoNqN.svg',
name: '设计价值观',
nameEn: 'Design Values',
to: '/docs/spec/values',
svgBg: (
<svg width="213px" height="303px" viewBox="0 0 213 303" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<circle id="Oval-12-Copy-6" fill="#1D39C4" opacity="0.45" cx="60" cy="157" r="25" />
@ -35,6 +36,7 @@ const page1Data = [
img: 'https://gw.alipayobjects.com/zos/rmsportal/qXncdwwUTTgUFnsbCNCE.svg',
name: '视觉',
nameEn: 'Visual',
to: '/docs/spec/colors',
svgBg: (
<svg width="207px" height="295px" viewBox="0 0 207 295" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<rect id="Rectangle-14" stroke="#1D39C4" opacity="0.7" x="192.5" y="62.5" width="14" height="14" rx="1" />
@ -56,6 +58,7 @@ const page1Data = [
img: 'https://gw.alipayobjects.com/zos/rmsportal/YFXXZocxAgjReehpPNbX.svg',
name: '可视化',
nameEn: 'Visualisation',
to: '/docs/spec/visual',
svgBg: (
<svg width="215px" height="286px" viewBox="0 0 215 286" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" style={{ transform: 'translateX(-30px)' }}>
<circle id="Oval-12-Copy-4" fill="#1D39C4" opacity="0.35" cx="77" cy="152" r="10" />
@ -77,6 +80,7 @@ const page1Data = [
img: 'https://gw.alipayobjects.com/zos/rmsportal/VPuetGsvJuYBwoDkZWFW.svg',
name: '动效',
nameEn: 'Animation',
to: '/docs/spec/motion',
svgBg: (
<svg width="193px" height="286px" viewBox="0 0 193 286" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" style={{ transform: 'translateY(-20px)' }}>
<circle id="Oval-12-Copy-4" fill="#1D39C4" opacity="0.35" cx="71" cy="65" r="10" />
@ -170,6 +174,7 @@ export default class Page1 extends React.PureComponent {
opacity: 0, duration: 300, x: 100, y: 150, ease: 'easeInBack',
};
render() {
const isZhCN = this.props.locale === 'zh-CN';
const children = page1Data.map((item, i) => {
const isHover = item.nameEn === this.state.hoverKey;
return (
@ -188,7 +193,7 @@ export default class Page1 extends React.PureComponent {
className="page1-block"
type="bottom"
component={Link}
componentProps={{ to: item.to }}
componentProps={{ to: utils.getLocalizedPathname(item.to, isZhCN) }}
onMouseEnter={() => { this.onMouseOver(item.nameEn); }}
onMouseLeave={this.onMouseOut}
>

19
site/theme/template/Home/Page2.jsx

@ -2,8 +2,9 @@ import React from 'react';
import { Row, Col, Icon } from 'antd';
import QueueAnim from 'rc-queue-anim';
import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { Link } from 'bisheng/router';
import { FormattedMessage } from 'react-intl';
import * as utils from '../utils';
import svgBgToParallax from './util';
@ -16,16 +17,19 @@ const page2Data = [
img: 'https://gw.alipayobjects.com/zos/rmsportal/EPaPtDVGnJhyqyBAUZMl.svg',
name: 'Ant Design Pro',
slogan: (<FormattedMessage id="app.home.product-pro-slogan" />),
link: 'https://pro.ant.design/index-cn',
},
{
img: 'https://gw.alipayobjects.com/zos/rmsportal/GobRAKexhfTSJdLFzDFY.svg',
name: 'Ant Design Mobile',
slogan: (<FormattedMessage id="app.home.product-mobile-slogan" />),
link: 'https://mobile.ant.design/index-cn',
},
{
img: 'https://gw.alipayobjects.com/zos/rmsportal/slVtnOCcgeAcLEPwtewY.svg',
name: 'AntV',
slogan: (<FormattedMessage id="app.home.product-antv-slogan" />),
link: 'https://antv.alipay.com/zh-cn/index.html',
},
];
@ -65,11 +69,16 @@ const svgBgChildArray = svgBgChild.map((item, i) => {
const { props } = item;
return React.cloneElement(item, { children: svgBgToParallax(props.children, i) });
});
export default function Page2({ isMoblie }) {
export default function Page2({ isMoblie, locale }) {
const isZhCN = locale === 'zh-CN';
const componentButton = (
<div key="b" className="components-button-wrapper">
<a>Ant Design of React <Icon type="right" /></a>
<a>Ant Design of Angular <Icon type="right" /></a>
<Link to={utils.getLocalizedPathname('/docs/react/introduce', isZhCN)}>
Ant Design of React <Icon type="right" />
</Link>
<a href="https://ng.ant.design/" target="_black">
Ant Design of Angular <Icon type="right" />
</a>
</div>
);
const children = page2Data.map((item, i) => {
@ -78,7 +87,7 @@ export default function Page2({ isMoblie }) {
}
const content = isMoblie && !i ? componentButton : [
<p key="p">{item.slogan}</p>,
<a key="a">learn more <Icon type="right" /></a>,
<a key="a" href={item.link} target="_black">learn more <Icon type="right" /></a>,
];
return (
<Row className="product-block" key={i.toString()}>

43
site/theme/template/Home/Page3.jsx

@ -2,7 +2,9 @@ import React from 'react';
import { Row, Col } from 'antd';
import QueueAnim from 'rc-queue-anim';
import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { Link } from 'bisheng/router';
import { FormattedMessage } from 'react-intl';
import * as utils from '../utils';
import svgBgToParallax from './util';
const page3Data = [
@ -10,11 +12,13 @@ const page3Data = [
title: <FormattedMessage id="app.home.tool-package-title" />,
content: <FormattedMessage id="app.home.tool-package-content" />,
img: 'https://gw.alipayobjects.com/zos/rmsportal/qggKjIGNFlVmMpwDUXPU.svg',
to: '/docs/spec/download',
},
{
title: <FormattedMessage id="app.home.tool-library-title" />,
content: <FormattedMessage id="app.home.tool-library-content" />,
img: 'https://gw.alipayobjects.com/zos/rmsportal/dgjVqwkJvptQEtlfctvk.svg',
link: 'http://library.ant.design/',
},
{
title: <FormattedMessage id="app.home.tool-kitchen-title" />,
@ -36,18 +40,33 @@ const svgBg = [
<rect id="Rectangle-14" stroke="#CED4D9" transform="translate(111.673081, 158.673081) rotate(30.000000) translate(-111.673081, -158.673081) " x="107.288047" y="254.288047" width="8.77006914" height="8.77006914" rx="1" />,
];
const svgChildren = svgBgToParallax(svgBg);
const children = page3Data.map((item, i) => (
<Col key={i.toString()} md={8} xs={24} className="page3-block">
<div className="page3-img-wrapper">
<img src={item.img} alt="icon" />
</div>
<div className="page3-text-wrapper">
<h3>{item.title}</h3>
<p>{item.content}</p>
</div>
</Col>
));
export default function Page3() {
export default function Page3({ locale }) {
const isZhCN = locale === 'zh-CN';
const children = page3Data.map((item, i) => {
const child = [
<div className="page3-img-wrapper" key="img">
<img src={item.img} alt="icon" />
</div>,
<div className="page3-text-wrapper" key="a">
<h3>{item.title}</h3>
<p>{item.content}</p>
</div>,
];
return (
<Col key={i.toString()} md={8} xs={24} className="page3-block">
{
item.to ? (
<Link to={utils.getLocalizedPathname(item.to, isZhCN)}>
{child}
</Link>) : (
<a href={item.link} target="_black">
{child}
</a>
)
}
</Col>
);
});
return (
<div className="home-page-wrapper page3" id="page3">
<div className="parallax-bg top" >

5
site/theme/template/Home/index.jsx

@ -61,6 +61,7 @@ const promoteBannerImageUrl = 'https://gw.alipayobjects.com/zos/rmsportal/qVVhew
class Home extends React.Component {
static contextTypes = {
intl: PropTypes.object.isRequired,
isMoblie: PropTypes.bool.isRequired,
}
constructor(props) {
@ -84,8 +85,8 @@ class Home extends React.Component {
}
}
render() {
const { isMoblie } = this.context;
const childProps = { ...this.props, isMoblie };
const { isMoblie, intl } = this.context;
const childProps = { ...this.props, isMoblie, locale: intl.locale };
const promoteBanner = this.state.adBannerClosed ? null : (
<a href="http://seeconf.alipay.com/" className="promote-banner" onClick={this.makeAdBannerClosed}>
<img

Loading…
Cancel
Save