Commit 18d59b659869439a1f8d689015716e11bac0d1c0
1 parent
2806c2ea
add en homepage
Showing
25 changed files
with
972 additions
and
32 deletions
front-end/landing-page/.umirc.js
front-end/landing-page/src/Index-En/Banner.jsx
0 → 100755
| 1 | +import React from 'react'; | ||
| 2 | +import PropTypes from 'prop-types'; | ||
| 3 | +import QueueAnim from 'rc-queue-anim'; | ||
| 4 | +import { Button, Icon } from 'antd'; | ||
| 5 | +import BannerImage from './BannerImage'; | ||
| 6 | + | ||
| 7 | +const ButtonGroup = Button.Group; | ||
| 8 | + | ||
| 9 | +const LubanIcon = Icon.createFromIconfontCN({ | ||
| 10 | + scriptUrl: '//at.alicdn.com/t/font_1455736_n0ivu1iicd.js', | ||
| 11 | +}); | ||
| 12 | + | ||
| 13 | +class Banner extends React.PureComponent { | ||
| 14 | + static propTypes = { | ||
| 15 | + className: PropTypes.string, | ||
| 16 | + } | ||
| 17 | + static defaultProps = { | ||
| 18 | + className: 'home-banner', | ||
| 19 | + } | ||
| 20 | + render() { | ||
| 21 | + const { className } = this.props; | ||
| 22 | + return ( | ||
| 23 | + <div className={`home-layout-wrapper ${className}`}> | ||
| 24 | + <div className="home-layout"> | ||
| 25 | + <QueueAnim className={`${className}-content-wrapper`} delay={300} ease="easeOutQuart"> | ||
| 26 | + <h1 key="h1"> | ||
| 27 | + Minimalist production, a key presentation | ||
| 28 | + </h1> | ||
| 29 | + <p key="p">An mobile page builder&generator with easy drag&drop editing features</p> | ||
| 30 | + <span key="button"> | ||
| 31 | + <Button | ||
| 32 | + type="primary" | ||
| 33 | + onClick={() => { | ||
| 34 | + window.open('https://api.luban-h5.wxjcart.com/main') | ||
| 35 | + }} | ||
| 36 | + > | ||
| 37 | + Start Using | ||
| 38 | + </Button> | ||
| 39 | + </span> | ||
| 40 | + <span key="button2"> | ||
| 41 | + <ButtonGroup> | ||
| 42 | + <Button type="link" size="small" title="Gitee" onClick={() => { | ||
| 43 | + window.open("https://gitee.com/ly525/luban-h5"); | ||
| 44 | + }}><LubanIcon type="iconmayun"/></Button> | ||
| 45 | + <Button type="link" size="small" title="GitHub" onClick={() => { | ||
| 46 | + window.open('https://github.com/ly525/luban-h5'); | ||
| 47 | + }}><img alt="GitHub stars" src="https://img.shields.io/github/stars/ly525/luban-h5?style=social" /></Button> | ||
| 48 | + </ButtonGroup> | ||
| 49 | + </span> | ||
| 50 | + </QueueAnim> | ||
| 51 | + <div className={`${className}-image-wrapper`}> | ||
| 52 | + <BannerImage /> | ||
| 53 | + </div> | ||
| 54 | + </div> | ||
| 55 | + </div> | ||
| 56 | + ); | ||
| 57 | + } | ||
| 58 | +} | ||
| 59 | + | ||
| 60 | +export default Banner; |
front-end/landing-page/src/Index-En/BannerImage.jsx
0 → 100755
| 1 | +import React from 'react'; | ||
| 2 | +import TweenOne from 'rc-tween-one'; | ||
| 3 | +import SvgDrawPlugin from 'rc-tween-one/lib/plugin/SvgDrawPlugin'; | ||
| 4 | +import BannerImg from '../assets/home/banner.svg' | ||
| 5 | + | ||
| 6 | +TweenOne.plugins.push(SvgDrawPlugin); | ||
| 7 | + | ||
| 8 | +export default function BannerImage() { | ||
| 9 | + return <img src={BannerImg} width={510} />; | ||
| 10 | +} |
front-end/landing-page/src/Index-En/Footer.jsx
0 → 100755
| 1 | +import React from 'react'; | ||
| 2 | +import { footer } from './data'; | ||
| 3 | + | ||
| 4 | +function antCloudFooter() { | ||
| 5 | + const children = footer.map((item, i) => (<div key={i}><a href={item.src} target="_blank">{item.text}</a></div>)); | ||
| 6 | + return (<div> | ||
| 7 | + <div className="logo" key="logo"> | ||
| 8 | + {/* <img src="https://gw.alipayobjects.com/zos/rmsportal/dnIbXmAgGbRxQJksRsJL.svg" width="72" height="82" /> */} | ||
| 9 | + <h1 style={{color: 'white'}}>鲁班 H5</h1> | ||
| 10 | + </div> | ||
| 11 | + <div key="nav" className="home-footer-nav-wrapper"> | ||
| 12 | + {children} | ||
| 13 | + </div> | ||
| 14 | + </div> | ||
| 15 | + ); | ||
| 16 | +} | ||
| 17 | + | ||
| 18 | +function Footer() { | ||
| 19 | + return ( | ||
| 20 | + <div className="home-layout-wrapper home-footer-wrapper"> | ||
| 21 | + <div className="home-layout"> | ||
| 22 | + {antCloudFooter()} | ||
| 23 | + <p key="cop" className="copy">©2019 - 2019 Metrix-Transform All Rights Reserved</p> | ||
| 24 | + </div> | ||
| 25 | + </div> | ||
| 26 | + ); | ||
| 27 | +} | ||
| 28 | + | ||
| 29 | +export default Footer; |
front-end/landing-page/src/Index-En/Header.jsx
0 → 100755
front-end/landing-page/src/Index-En/Page1.jsx
0 → 100755
| 1 | +import React from 'react'; | ||
| 2 | +import QueueAnim from 'rc-queue-anim'; | ||
| 3 | +import OverPack from 'rc-scroll-anim/lib/ScrollOverPack'; | ||
| 4 | +import { Row, Col } from 'antd'; | ||
| 5 | +import { page1 } from './data'; | ||
| 6 | + | ||
| 7 | +export default function Page1() { | ||
| 8 | + const children = page1.map((d, i) => ( | ||
| 9 | + <QueueAnim | ||
| 10 | + component={Col} | ||
| 11 | + key={i} | ||
| 12 | + type="bottom" | ||
| 13 | + className="col" | ||
| 14 | + componentProps={{ span: 8 }} | ||
| 15 | + > | ||
| 16 | + <div key="image" className="image" style={{ backgroundImage: `url(${d.src})`, backgroundSize: 'contain' }} /> | ||
| 17 | + <h3 key="h3">{d.title}</h3> | ||
| 18 | + <p key="p">{d.content}</p> | ||
| 19 | + </QueueAnim> | ||
| 20 | + )); | ||
| 21 | + return ( | ||
| 22 | + <div className="home-layout-wrapper home-func-wrapper" id="home-func" > | ||
| 23 | + <h2>Features</h2> | ||
| 24 | + <i className="line" /> | ||
| 25 | + <OverPack className="home-layout" location="home-func" playScale={0.4}> | ||
| 26 | + <QueueAnim className="home-func" type="bottom" key="home-func" ease="easeOutQuart" leaveReverse> | ||
| 27 | + <QueueAnim | ||
| 28 | + key="content" | ||
| 29 | + component={Row} | ||
| 30 | + type="bottom" | ||
| 31 | + componentProps={{ gutter: 171 }} | ||
| 32 | + > | ||
| 33 | + {children} | ||
| 34 | + </QueueAnim> | ||
| 35 | + </QueueAnim> | ||
| 36 | + </OverPack> | ||
| 37 | + </div>); | ||
| 38 | +} |
front-end/landing-page/src/Index-En/Page2.jsx
0 → 100755
| 1 | +import React from 'react'; | ||
| 2 | +import QueueAnim from 'rc-queue-anim'; | ||
| 3 | +import OverPack from 'rc-scroll-anim/lib/ScrollOverPack'; | ||
| 4 | +import QRCode from 'qrcode.react'; | ||
| 5 | +import { Row, Col } from 'antd'; | ||
| 6 | +import { page2 } from './data'; | ||
| 7 | + | ||
| 8 | +export default function Page2() { | ||
| 9 | + const children = page2.map((d, i) => { | ||
| 10 | + if (i > 2) { | ||
| 11 | + return null; | ||
| 12 | + } | ||
| 13 | + return ( | ||
| 14 | + <Col key={i} className="col" span={8}> | ||
| 15 | + <div className="content-wrapper home-hover"> | ||
| 16 | + <div className="image" style={{ backgroundImage: `url(${d.image})` }} /> | ||
| 17 | + <div className="code-wrapper"> | ||
| 18 | + <h4>Scan Qr code to preview</h4> | ||
| 19 | + <QRCode value={window.location.origin + d.url} size={160} /> | ||
| 20 | + </div> | ||
| 21 | + </div> | ||
| 22 | + </Col>); | ||
| 23 | + }); | ||
| 24 | + return ( | ||
| 25 | + <div className="home-layout-wrapper home-case-wrapper"> | ||
| 26 | + <OverPack className="home-layout" playScale={0.4}> | ||
| 27 | + <QueueAnim className="home-case" type="bottom" key="home-case" ease="easeOutQuart" leaveReverse> | ||
| 28 | + <h2 key="h2">scan the qr codes for great examples</h2> | ||
| 29 | + <i key="i" className="line" /> | ||
| 30 | + <QueueAnim | ||
| 31 | + key="content" | ||
| 32 | + component={Row} | ||
| 33 | + type="bottom" | ||
| 34 | + componentProps={{ gutter: 171 }} | ||
| 35 | + > | ||
| 36 | + {children} | ||
| 37 | + </QueueAnim> | ||
| 38 | + </QueueAnim> | ||
| 39 | + </OverPack> | ||
| 40 | + </div>); | ||
| 41 | +} |
front-end/landing-page/src/Index-En/Page3.jsx
0 → 100755
| 1 | +import React from 'react'; | ||
| 2 | +import QueueAnim from 'rc-queue-anim'; | ||
| 3 | +import OverPack from 'rc-scroll-anim/lib/ScrollOverPack'; | ||
| 4 | +import { Row, Col } from 'antd'; | ||
| 5 | +import { page3 } from './data'; | ||
| 6 | + | ||
| 7 | +export default function Page3() { | ||
| 8 | + const children = page3.map((d, i) => ( | ||
| 9 | + <Col span={8} className="col" key={i.toString()}> | ||
| 10 | + <QueueAnim | ||
| 11 | + type="bottom" | ||
| 12 | + className="content-wrapper home-hover" | ||
| 13 | + onClick={() => { }} | ||
| 14 | + > | ||
| 15 | + <div key="image" className="image">{d.svg}</div> | ||
| 16 | + <h3 key="h3">{d.title}</h3> | ||
| 17 | + {d.content} | ||
| 18 | + {d.exp && <div className="exp" key="exp">{d.exp}</div>} | ||
| 19 | + </QueueAnim> | ||
| 20 | + </Col> | ||
| 21 | + )); | ||
| 22 | + return ( | ||
| 23 | + <div className="home-layout-wrapper home-serve-wrapper"> | ||
| 24 | + <OverPack className="home-layout" playScale={0.4}> | ||
| 25 | + <QueueAnim className="home-serve" type="bottom" key="home-func" ease="easeOutQuart" leaveReverse> | ||
| 26 | + <h2 key="h2">Plans</h2> | ||
| 27 | + <i key="i" className="line" /> | ||
| 28 | + <QueueAnim | ||
| 29 | + key="content" | ||
| 30 | + component={Row} | ||
| 31 | + type="bottom" | ||
| 32 | + componentProps={{ gutter: 96 }} | ||
| 33 | + > | ||
| 34 | + {children} | ||
| 35 | + </QueueAnim> | ||
| 36 | + </QueueAnim> | ||
| 37 | + </OverPack> | ||
| 38 | + </div>); | ||
| 39 | +} |
front-end/landing-page/src/Index-En/Page4.jsx
0 → 100755
| 1 | +import React from 'react'; | ||
| 2 | +import QueueAnim from 'rc-queue-anim'; | ||
| 3 | +import OverPack from 'rc-scroll-anim/lib/ScrollOverPack'; | ||
| 4 | +import { Row, Col } from 'antd'; | ||
| 5 | +import { page4 } from './data'; | ||
| 6 | + | ||
| 7 | +function getLi(num, d, i) { | ||
| 8 | + const t = num + 1; | ||
| 9 | + if (i > t * 4 - 1 || i < num * 4) { | ||
| 10 | + return null; | ||
| 11 | + } | ||
| 12 | + return ( | ||
| 13 | + <Col className="col" span={4} key={i} offset={!(i % 4) ? 1 : 2}> | ||
| 14 | + <i style={{ backgroundImage: `url(${d})` }} /> | ||
| 15 | + </Col> | ||
| 16 | + ); | ||
| 17 | +} | ||
| 18 | +export default function Page4() { | ||
| 19 | + const children = []; | ||
| 20 | + for (let i = 0; i < Math.floor(page4.length / 4); i++) { | ||
| 21 | + children.push(( | ||
| 22 | + <QueueAnim | ||
| 23 | + component={Row} | ||
| 24 | + type="bottom" | ||
| 25 | + key={i} | ||
| 26 | + > | ||
| 27 | + {page4.map(getLi.bind(this, i)).filter(item => item)} | ||
| 28 | + </QueueAnim>)); | ||
| 29 | + } | ||
| 30 | + return ( | ||
| 31 | + <div className="home-layout-wrapper home-user-wrapper"> | ||
| 32 | + <OverPack className="home-layout" playScale={0.4}> | ||
| 33 | + <QueueAnim className="home-user" type="bottom" key="home-func" ease="easeOutQuart" leaveReverse> | ||
| 34 | + <h2 key="h2">我们的用户</h2> | ||
| 35 | + <i key="i" className="line" /> | ||
| 36 | + {children} | ||
| 37 | + </QueueAnim> | ||
| 38 | + </OverPack> | ||
| 39 | + </div> | ||
| 40 | + ); | ||
| 41 | +} |
front-end/landing-page/src/Index-En/data.js
0 → 100755
| 1 | +import React from 'react'; | ||
| 2 | + | ||
| 3 | +export const page1 = [ | ||
| 4 | + { | ||
| 5 | + title: 'Easy to set up', | ||
| 6 | + content: 'Integrating dynamic effects, music, video and images, users can easily achieve Html5 card', | ||
| 7 | + src: 'http://qiniu-image.luban-h5.wxjcart.com/landing-page/home-feature/quick-make.svg', | ||
| 8 | + }, | ||
| 9 | + { | ||
| 10 | + title: 'Form Collection', | ||
| 11 | + content: 'Collect and organize information.Get answers from users fast.', | ||
| 12 | + src: 'http://qiniu-image.luban-h5.wxjcart.com/landing-page/home-feature/submit-form.svg', | ||
| 13 | + }, | ||
| 14 | + { | ||
| 15 | + title: 'PSD to HTML5', | ||
| 16 | + content: 'Upload PSD, and parse it to HTML5, just seconds', | ||
| 17 | + src: 'http://qiniu-image.luban-h5.wxjcart.com/landing-page/home-feature/import-psd.svg', | ||
| 18 | + }, | ||
| 19 | +]; | ||
| 20 | + | ||
| 21 | +export const page2 = [ | ||
| 22 | + { | ||
| 23 | + title: 'Invitation', | ||
| 24 | + url: '/works/preview/1552', | ||
| 25 | + image: 'https://i.loli.net/2019/10/13/RjQkhE3OsrVv7uz.png', | ||
| 26 | + }, | ||
| 27 | + { | ||
| 28 | + title: 'Good Morning', | ||
| 29 | + url: '/works/preview/1551', | ||
| 30 | + image: 'https://i.loli.net/2019/10/13/kyzhsWFbmZT1JrN.png', | ||
| 31 | + }, | ||
| 32 | + { | ||
| 33 | + title: 'Day of the Programmer', | ||
| 34 | + url: '/works/preview/833', | ||
| 35 | + image: 'https://i.loli.net/2019/10/10/FtWXY3wDNJLT4GP.png', | ||
| 36 | + }, | ||
| 37 | +]; | ||
| 38 | + | ||
| 39 | +export const page3 = [ | ||
| 40 | + { | ||
| 41 | + title: 'Personal', | ||
| 42 | + content: [ | ||
| 43 | + <p key="1">Create Mobile Page</p>, | ||
| 44 | + <p key="2">Manage Templates</p>, | ||
| 45 | + <p key="3">Form Collection</p>, | ||
| 46 | + <p key="3">Data statistics</p>, | ||
| 47 | + ], | ||
| 48 | + // exp: '免费使用', | ||
| 49 | + svg: (<svg width="32px" height="32px" viewBox="0 0 32 32"> | ||
| 50 | + <defs> | ||
| 51 | + <linearGradient x1="50%" y1="0%" x2="50%" y2="98.8500478%" id="linearGradient-1"> | ||
| 52 | + <stop stopColor="#FFD24C" offset="0%" /> | ||
| 53 | + <stop stopColor="#FFB800" offset="100%" /> | ||
| 54 | + </linearGradient> | ||
| 55 | + </defs> | ||
| 56 | + <path | ||
| 57 | + d="M11.2,19.9763991 L1.43301577,25.9589289 | ||
| 58 | + C0.542750835,26.5042392 1.20441457e-15,27.4731633 1.33226763e-15,28.5171628 | ||
| 59 | + L0,28.5171628 L0,30 C1.3527075e-16,31.1045695 0.8954305,32 2,32 | ||
| 60 | + L30,32 C31.1045695,32 32,31.1045695 32,30 L32,30 L32,28.5391533 | ||
| 61 | + C32,27.4832633 31.4449138,26.5051178 30.53843,25.9636469 L30.53843,25.9636469 | ||
| 62 | + L20.8,20.1465799 L20.8,18.1051172 C22.2729985,16.7867478 23.2,14.8708611 23.2,12.7384615 | ||
| 63 | + L23.2,7.2 C23.2,3.2235498 19.9764502,-7.30462051e-16 16,0 | ||
| 64 | + C12.0235498,7.30462051e-16 8.8,3.2235498 8.8,7.2 L8.8,7.2 | ||
| 65 | + L8.8,12.7384615 C8.8,14.8708611 9.72700154,16.7867478 11.2,18.1051172 L11.2,19.9763991 Z" | ||
| 66 | + fill="#D9D9D9" | ||
| 67 | + /> | ||
| 68 | + <path | ||
| 69 | + d="M11.2,19.9763991 L1.43301577,25.9589289 | ||
| 70 | + C0.542750835,26.5042392 1.20441457e-15,27.4731633 1.33226763e-15,28.5171628 | ||
| 71 | + L0,28.5171628 L0,30 C1.3527075e-16,31.1045695 0.8954305,32 2,32 | ||
| 72 | + L30,32 C31.1045695,32 32,31.1045695 32,30 L32,30 L32,28.5391533 | ||
| 73 | + C32,27.4832633 31.4449138,26.5051178 30.53843,25.9636469 L30.53843,25.9636469 | ||
| 74 | + L20.8,20.1465799 L20.8,18.1051172 C22.2729985,16.7867478 23.2,14.8708611 23.2,12.7384615 | ||
| 75 | + L23.2,7.2 C23.2,3.2235498 19.9764502,-7.30462051e-16 16,0 | ||
| 76 | + C12.0235498,7.30462051e-16 8.8,3.2235498 8.8,7.2 L8.8,7.2 | ||
| 77 | + L8.8,12.7384615 C8.8,14.8708611 9.72700154,16.7867478 11.2,18.1051172 L11.2,19.9763991 Z" | ||
| 78 | + fill="url(#linearGradient-1)" | ||
| 79 | + className="icon-hover" | ||
| 80 | + /> | ||
| 81 | + </svg>), | ||
| 82 | + }, | ||
| 83 | + { | ||
| 84 | + title: 'Enterprise', | ||
| 85 | + content: [ | ||
| 86 | + <p key="1">Create Mobile Page</p>, | ||
| 87 | + <p key="2">Manage Templates</p>, | ||
| 88 | + <p key="3">Form Collection</p>, | ||
| 89 | + <p key="3">Data statistics</p>, | ||
| 90 | + <p key="3">PSD to HTML5</p>, | ||
| 91 | + ], | ||
| 92 | + svg: ( | ||
| 93 | + <svg width="32px" height="32px" viewBox="0 0 32 32"> | ||
| 94 | + <path | ||
| 95 | + d="M22.3555358,32 L9.93657149,32 L2,32 C0.8954305,32 1.3527075e-16,31.1045695 0,30 | ||
| 96 | + L0,18 C-1.3527075e-16,16.8954305 0.8954305,16 2,16 L2,16 L6.78535432,16 L6.78535432,2 | ||
| 97 | + L6.78535432,2 C6.78535432,0.8954305 7.68078482,2.02906125e-16 8.78535432,0 L21.7853543,0 | ||
| 98 | + C22.8899238,-2.02906125e-16 23.7853543,0.8954305 23.7853543,2 L23.7853543,7 L30,7 | ||
| 99 | + C31.1045695,7 32,7.8954305 32,9 L32,30 C32,31.1045695 31.1045695,32 30,32 L22.3555358,32 | ||
| 100 | + Z M10,4 L10,8 L14,8 L14,4 L10,4 Z M10,12 L10,16 L14,16 L14,12 L10,12 Z M10,20 L10,24 L14,24 | ||
| 101 | + L14,20 L10,20 Z M3,20 L3,24 L7,24 L7,20 L3,20 Z M17,4 L17,8 L21,8 L21,4 L17,4 Z M17,12 L17,16 | ||
| 102 | + L21,16 L21,12 L17,12 Z M17,20 L17,24 L21,24 L21,20 L17,20 Z M24,20 L24,24 L28,24 L28,20 L24,20 | ||
| 103 | + Z M24,12 L24,16 L28,16 L28,12 L24,12 Z" | ||
| 104 | + fill="#D9D9D9" | ||
| 105 | + /> | ||
| 106 | + <path | ||
| 107 | + d="M22.3555358,32 L9.93657149,32 L2,32 C0.8954305,32 1.3527075e-16,31.1045695 0,30 | ||
| 108 | + L0,18 C-1.3527075e-16,16.8954305 0.8954305,16 2,16 L2,16 L6.78535432,16 L6.78535432,2 | ||
| 109 | + L6.78535432,2 C6.78535432,0.8954305 7.68078482,2.02906125e-16 8.78535432,0 L21.7853543,0 | ||
| 110 | + C22.8899238,-2.02906125e-16 23.7853543,0.8954305 23.7853543,2 L23.7853543,7 L30,7 | ||
| 111 | + C31.1045695,7 32,7.8954305 32,9 L32,30 C32,31.1045695 31.1045695,32 30,32 L22.3555358,32 | ||
| 112 | + Z M10,4 L10,8 L14,8 L14,4 L10,4 Z M10,12 L10,16 L14,16 L14,12 L10,12 Z M10,20 L10,24 L14,24 | ||
| 113 | + L14,20 L10,20 Z M3,20 L3,24 L7,24 L7,20 L3,20 Z M17,4 L17,8 L21,8 L21,4 L17,4 Z M17,12 L17,16 | ||
| 114 | + L21,16 L21,12 L17,12 Z M17,20 L17,24 L21,24 L21,20 L17,20 Z M24,20 L24,24 L28,24 L28,20 L24,20 | ||
| 115 | + Z M24,12 L24,16 L28,16 L28,12 L24,12 Z" | ||
| 116 | + fill="url(#linearGradient-1)" | ||
| 117 | + className="icon-hover" | ||
| 118 | + /> | ||
| 119 | + </svg>), | ||
| 120 | + }, | ||
| 121 | + { | ||
| 122 | + title: 'Enterprise VIP', | ||
| 123 | + content: [ | ||
| 124 | + <p key="1">Create Mobile Page</p>, | ||
| 125 | + <p key="2">Manage Templates</p>, | ||
| 126 | + <p key="3">Form Collection</p>, | ||
| 127 | + <p key="3">Data statistics</p>, | ||
| 128 | + <p key="3">PSD to HTML5</p>, | ||
| 129 | + <p key="3">Custom Script</p>, | ||
| 130 | + <p key="6">User Management(TODO)</p>, | ||
| 131 | + <p key="6">Project Management(TODO)</p>, | ||
| 132 | + ], | ||
| 133 | + svg: ( | ||
| 134 | + <svg width="32px" height="32px" viewBox="0 0 32 32"> | ||
| 135 | + <path | ||
| 136 | + d="M21.1504124,8.82079742 L16.5552541,3.32558694 | ||
| 137 | + C16.5324137,3.29827282 16.5071873,3.27304601 16.4798736,3.25020514 | ||
| 138 | + C16.2256714,3.03763068 15.8472742,3.07137659 15.6346998,3.32557875 | ||
| 139 | + L15.6346998,3.32557875 L10.966694,8.90770327 L8.07603504,6.76607715 | ||
| 140 | + L8.07603504,6.76607715 C7.80977712,6.56881247 7.43401779,6.62474254 7.23675311,6.89100046 | ||
| 141 | + C7.13505771,7.02826378 7.09669461,7.20236809 7.13128245,7.36966081 L8.29535756,13 | ||
| 142 | + L15.9998162,13 L23.7045714,13 L24.8686535,7.36962696 | ||
| 143 | + C24.9357456,7.0451192 24.727069,6.72766477 24.4025612,6.66057265 | ||
| 144 | + C24.2352715,6.62598542 24.0611703,6.66434651 23.9239079,6.76603807 | ||
| 145 | + L21.1504124,8.82079742 Z M2,14 L30,14 C31.1045695,14 32,14.8954305 32,16 | ||
| 146 | + L32,30 C32,31.1045695 31.1045695,32 30,32 L2,32 C0.8954305,32 1.3527075e-16,31.1045695 0,30 | ||
| 147 | + L0,16 C-1.3527075e-16,14.8954305 0.8954305,14 2,14 L2,14 Z M16,2 C15.4477153,2 15,1.55228475 15,1 | ||
| 148 | + C15,0.44771525 15.4477153,0 16,0 C16.5522847,0 17,0.44771525 17,1 C17,1.55228475 16.5522847,2 16,2 Z | ||
| 149 | + M6,6 C5.44771525,6 5,5.55228475 5,5 C5,4.44771525 5.44771525,4 6,4 C6.55228475,4 7,4.44771525 7,5 | ||
| 150 | + C7,5.55228475 6.55228475,6 6,6 Z M26,6 C25.4477153,6 25,5.55228475 25,5 | ||
| 151 | + C25,4.44771525 25.4477153,4 26,4 C26.5522847,4 27,4.44771525 27,5 | ||
| 152 | + C27,5.55228475 26.5522847,6 26,6 Z M14.0979687,19.25 | ||
| 153 | + C14.1648524,19.04375 14.177013,18.94375 14.1526917,18.825 | ||
| 154 | + C14.1101294,18.6375 13.9094785,18.5 13.7149079,18.5 | ||
| 155 | + C13.6237029,18.5 13.5264176,18.53125 13.459534,18.59375 | ||
| 156 | + C13.368329,18.675 13.3257667,18.75625 13.2588831,18.9625 L11.0821247,25.80625 | ||
| 157 | + L8.90536631,18.9625 C8.83848268,18.75625 8.79592036,18.675 8.7047154,18.59375 | ||
| 158 | + C8.63783176,18.53125 8.54054647,18.5 8.44934151,18.5 | ||
| 159 | + C8.25477093,18.5 8.05412002,18.6375 8.0115577,18.825 | ||
| 160 | + C7.98723638,18.94375 7.99939704,19.04375 8.06628068,19.25 L10.5713769,26.98125 | ||
| 161 | + C10.6260999,27.15625 10.6929835,27.3 10.7659475,27.36875 | ||
| 162 | + C10.8632328,27.46875 10.9544378,27.5 11.0821247,27.5 | ||
| 163 | + C11.2037313,27.5 11.2949363,27.46875 11.3983019,27.36875 | ||
| 164 | + C11.4712659,27.3 11.5381495,27.15625 11.5928725,26.98125 | ||
| 165 | + L14.0979687,19.25 Z M16.5726622,19.15 C16.5726622,18.9 16.5605016,18.81875 16.4875376,18.7 | ||
| 166 | + C16.4145736,18.58125 16.274726,18.5 16.1044768,18.5 C15.9342275,18.5 15.7943799,18.58125 15.7214159,18.7 | ||
| 167 | + C15.648452,18.81875 15.6362913,18.9 15.6362913,19.15 L15.6362913,26.85 | ||
| 168 | + C15.6362913,27.1 15.648452,27.18125 15.7214159,27.3 C15.7943799,27.41875 15.9342275,27.5 16.1044768,27.5 | ||
| 169 | + C16.274726,27.5 16.4145736,27.41875 16.4875376,27.3 C16.5605016,27.18125 16.5726622,27.1 16.5726622,26.85 | ||
| 170 | + L16.5726622,19.15 Z M19.0777579,19.13125 L19.0777579,26.85 | ||
| 171 | + C19.0777579,27.1 19.0899186,27.18125 19.1628825,27.3 | ||
| 172 | + C19.2358465,27.41875 19.3756941,27.5 19.5459434,27.5 | ||
| 173 | + C19.7161926,27.5 19.8560402,27.41875 19.9290042,27.3 | ||
| 174 | + C20.0019682,27.18125 20.0141288,27.1 20.0141288,26.85 | ||
| 175 | + L20.0141288,23.7875 L22.3124938,23.7875 C23.8872995,23.7875 25,22.75 25,21.1625 | ||
| 176 | + C25,19.575 23.8872995,18.55 22.3124938,18.55 L19.6432287,18.55 | ||
| 177 | + C19.4973007,18.55 19.3331318,18.55 19.2054449,18.68125 | ||
| 178 | + C19.0777579,18.8125 19.0777579,18.98125 19.0777579,19.13125 Z M22.2395299,19.4 | ||
| 179 | + C23.3218287,19.4 24.0575487,19.9875 24.0575487,21.1625 | ||
| 180 | + C24.0575487,22.3375 23.3218287,22.9375 22.2395299,22.9375 L20.0141288,22.9375 | ||
| 181 | + L20.0141288,19.4 L22.2395299,19.4 Z" | ||
| 182 | + fill="#D9D9D9" | ||
| 183 | + /> | ||
| 184 | + <path | ||
| 185 | + d="M21.1504124,8.82079742 L16.5552541,3.32558694 | ||
| 186 | + C16.5324137,3.29827282 16.5071873,3.27304601 16.4798736,3.25020514 | ||
| 187 | + C16.2256714,3.03763068 15.8472742,3.07137659 15.6346998,3.32557875 | ||
| 188 | + L15.6346998,3.32557875 L10.966694,8.90770327 L8.07603504,6.76607715 | ||
| 189 | + L8.07603504,6.76607715 C7.80977712,6.56881247 7.43401779,6.62474254 7.23675311,6.89100046 | ||
| 190 | + C7.13505771,7.02826378 7.09669461,7.20236809 7.13128245,7.36966081 L8.29535756,13 | ||
| 191 | + L15.9998162,13 L23.7045714,13 L24.8686535,7.36962696 | ||
| 192 | + C24.9357456,7.0451192 24.727069,6.72766477 24.4025612,6.66057265 | ||
| 193 | + C24.2352715,6.62598542 24.0611703,6.66434651 23.9239079,6.76603807 | ||
| 194 | + L21.1504124,8.82079742 Z M2,14 L30,14 C31.1045695,14 32,14.8954305 32,16 | ||
| 195 | + L32,30 C32,31.1045695 31.1045695,32 30,32 L2,32 C0.8954305,32 1.3527075e-16,31.1045695 0,30 | ||
| 196 | + L0,16 C-1.3527075e-16,14.8954305 0.8954305,14 2,14 L2,14 Z M16,2 C15.4477153,2 15,1.55228475 15,1 | ||
| 197 | + C15,0.44771525 15.4477153,0 16,0 C16.5522847,0 17,0.44771525 17,1 C17,1.55228475 16.5522847,2 16,2 Z | ||
| 198 | + M6,6 C5.44771525,6 5,5.55228475 5,5 C5,4.44771525 5.44771525,4 6,4 C6.55228475,4 7,4.44771525 7,5 | ||
| 199 | + C7,5.55228475 6.55228475,6 6,6 Z M26,6 C25.4477153,6 25,5.55228475 25,5 | ||
| 200 | + C25,4.44771525 25.4477153,4 26,4 C26.5522847,4 27,4.44771525 27,5 | ||
| 201 | + C27,5.55228475 26.5522847,6 26,6 Z M14.0979687,19.25 | ||
| 202 | + C14.1648524,19.04375 14.177013,18.94375 14.1526917,18.825 | ||
| 203 | + C14.1101294,18.6375 13.9094785,18.5 13.7149079,18.5 | ||
| 204 | + C13.6237029,18.5 13.5264176,18.53125 13.459534,18.59375 | ||
| 205 | + C13.368329,18.675 13.3257667,18.75625 13.2588831,18.9625 L11.0821247,25.80625 | ||
| 206 | + L8.90536631,18.9625 C8.83848268,18.75625 8.79592036,18.675 8.7047154,18.59375 | ||
| 207 | + C8.63783176,18.53125 8.54054647,18.5 8.44934151,18.5 | ||
| 208 | + C8.25477093,18.5 8.05412002,18.6375 8.0115577,18.825 | ||
| 209 | + C7.98723638,18.94375 7.99939704,19.04375 8.06628068,19.25 L10.5713769,26.98125 | ||
| 210 | + C10.6260999,27.15625 10.6929835,27.3 10.7659475,27.36875 | ||
| 211 | + C10.8632328,27.46875 10.9544378,27.5 11.0821247,27.5 | ||
| 212 | + C11.2037313,27.5 11.2949363,27.46875 11.3983019,27.36875 | ||
| 213 | + C11.4712659,27.3 11.5381495,27.15625 11.5928725,26.98125 | ||
| 214 | + L14.0979687,19.25 Z M16.5726622,19.15 C16.5726622,18.9 16.5605016,18.81875 16.4875376,18.7 | ||
| 215 | + C16.4145736,18.58125 16.274726,18.5 16.1044768,18.5 C15.9342275,18.5 15.7943799,18.58125 15.7214159,18.7 | ||
| 216 | + C15.648452,18.81875 15.6362913,18.9 15.6362913,19.15 L15.6362913,26.85 | ||
| 217 | + C15.6362913,27.1 15.648452,27.18125 15.7214159,27.3 C15.7943799,27.41875 15.9342275,27.5 16.1044768,27.5 | ||
| 218 | + C16.274726,27.5 16.4145736,27.41875 16.4875376,27.3 C16.5605016,27.18125 16.5726622,27.1 16.5726622,26.85 | ||
| 219 | + L16.5726622,19.15 Z M19.0777579,19.13125 L19.0777579,26.85 | ||
| 220 | + C19.0777579,27.1 19.0899186,27.18125 19.1628825,27.3 | ||
| 221 | + C19.2358465,27.41875 19.3756941,27.5 19.5459434,27.5 | ||
| 222 | + C19.7161926,27.5 19.8560402,27.41875 19.9290042,27.3 | ||
| 223 | + C20.0019682,27.18125 20.0141288,27.1 20.0141288,26.85 | ||
| 224 | + L20.0141288,23.7875 L22.3124938,23.7875 C23.8872995,23.7875 25,22.75 25,21.1625 | ||
| 225 | + C25,19.575 23.8872995,18.55 22.3124938,18.55 L19.6432287,18.55 | ||
| 226 | + C19.4973007,18.55 19.3331318,18.55 19.2054449,18.68125 | ||
| 227 | + C19.0777579,18.8125 19.0777579,18.98125 19.0777579,19.13125 Z M22.2395299,19.4 | ||
| 228 | + C23.3218287,19.4 24.0575487,19.9875 24.0575487,21.1625 | ||
| 229 | + C24.0575487,22.3375 23.3218287,22.9375 22.2395299,22.9375 L20.0141288,22.9375 | ||
| 230 | + L20.0141288,19.4 L22.2395299,19.4 Z" | ||
| 231 | + fill="url(#linearGradient-1)" | ||
| 232 | + className="icon-hover" | ||
| 233 | + /> | ||
| 234 | + </svg>), | ||
| 235 | + }, | ||
| 236 | +]; | ||
| 237 | + | ||
| 238 | +export const page4 = [ | ||
| 239 | + 'https://gw.alipayobjects.com/zos/rmsportal/kJPmZttedahfIvsZDGTd.svg', | ||
| 240 | + 'https://gw.alipayobjects.com/zos/rmsportal/ktLOdfjNyExgKyWjiCvm.svg', | ||
| 241 | + 'https://gw.alipayobjects.com/zos/rmsportal/gNNxbrNqlHdnRuMjUXrL.svg', | ||
| 242 | + 'https://gw.alipayobjects.com/zos/rmsportal/qWaneWxxMVpASpiCOcsT.svg', | ||
| 243 | + 'https://gw.alipayobjects.com/zos/rmsportal/kyCpvqWFloOpAOqzOlBg.svg', | ||
| 244 | + 'https://gw.alipayobjects.com/zos/rmsportal/bBzJNEnPvyhNUhyHipvO.svg', | ||
| 245 | + 'https://gw.alipayobjects.com/zos/rmsportal/UbEpCMXGBmDgkJXfIgMx.svg', | ||
| 246 | + 'https://gw.alipayobjects.com/zos/rmsportal/xsWGKOdkRoJnzHIZlRiD.svg', | ||
| 247 | +]; | ||
| 248 | + | ||
| 249 | +export const footer = [ | ||
| 250 | + { text: '中文文档', src: 'https://ly525.github.io/luban-h5' }, | ||
| 251 | + { text: 'English Document', src: 'https://ly525.github.io/luban-h5' }, | ||
| 252 | + { text: 'Gitter', src: 'https://gitter.im/luban-h5/community' }, | ||
| 253 | +]; |
front-end/landing-page/src/Index-En/index.jsx
0 → 100755
| 1 | +import React from 'react'; | ||
| 2 | +import DocumentTitle from 'react-document-title'; | ||
| 3 | +import Header from './Header'; | ||
| 4 | +import Banner from './Banner'; | ||
| 5 | +import Page1 from './Page1'; | ||
| 6 | +import Page2 from './Page2'; | ||
| 7 | +import Page3 from './Page3'; | ||
| 8 | +import Page4 from './Page4'; | ||
| 9 | +import Footer from './Footer'; | ||
| 10 | +import './static/style'; | ||
| 11 | + | ||
| 12 | +// 不支持移动端 | ||
| 13 | +class Home extends React.PureComponent { | ||
| 14 | + render() { | ||
| 15 | + return ( | ||
| 16 | + <div className="home-page"> | ||
| 17 | + {/* <Header key="header" /> */} | ||
| 18 | + <Banner key="banner" /> | ||
| 19 | + <Page1 key="page1" /> | ||
| 20 | + <Page2 key="page2" /> | ||
| 21 | + <Page3 key="page3" /> | ||
| 22 | + {/* <Page4 key="page4" /> */} | ||
| 23 | + <Footer key="footer" /> | ||
| 24 | + <DocumentTitle title="鲁班H5 - 移动建站平台" /> | ||
| 25 | + </div> | ||
| 26 | + ); | ||
| 27 | + } | ||
| 28 | +} | ||
| 29 | +export default Home; |
front-end/landing-page/src/Index-En/static/custom.less
0 → 100755
front-end/landing-page/src/Index-En/static/default.less
0 → 100755
| 1 | +@import "~antd/lib/style/themes/default.less"; | ||
| 2 | +// 品牌色 | ||
| 3 | +@color-fengdie: #ffbf00; | ||
| 4 | +// 线框 | ||
| 5 | +@border-color: #D9D9D9; | ||
| 6 | +// 分割线 | ||
| 7 | +@separate-line-color: #E9E9E9; | ||
| 8 | +// 多行文本 | ||
| 9 | +@font-color: rgba(0,0,0,.65); | ||
| 10 | +// 标题、单行 | ||
| 11 | +@font-important-color: rgba(0,0,0,.85); | ||
| 12 | +@font-active-color: #666; | ||
| 13 | +// 辅助信息 | ||
| 14 | +@font-tip-color: rgba(0,0,0,.43); | ||
| 15 | +// 警告色 | ||
| 16 | +@font-warning: #f56a00; | ||
| 17 | +// 失败色 | ||
| 18 | +@font-fail: #f04134; | ||
| 19 | + | ||
| 20 | +// 主按钮颜色 | ||
| 21 | +@button-primary-color: #ffbf00; | ||
| 22 | +@label-color: #666; | ||
| 23 | +@border-active-color: #ffbf00; | ||
| 24 | +@background-active-color: #FFF8EF; | ||
| 25 | +@link-color: #50A4DB; | ||
| 26 | +@selected-color: #FFBC40; | ||
| 27 | +@moved-color: #FFF1E0; | ||
| 28 | +@header-background-color: #222222; | ||
| 29 | + | ||
| 30 | +@status-released-color: #00A854; | ||
| 31 | +@status-editing-color: #2DB7F5; | ||
| 32 | +@status-previewing-color: #7265E6; | ||
| 33 | +@status-approve_waiting-color: #FAC450; | ||
| 34 | +@status-approve_refused-color: #FF6600; | ||
| 35 | +@status-release_fail-color: #FF6600; | ||
| 36 | +@status-noop-color: #999; | ||
| 37 | +@search-input-border-color: #F59F16; | ||
| 38 | + | ||
| 39 | + | ||
| 40 | +@approveButtonBackgroundColor: #f7f7f7; | ||
| 41 | +@weekBackgroundColor: #FBFBFB; | ||
| 42 | + | ||
| 43 | +@highlight-font-color: @search-input-border-color; | ||
| 44 | + | ||
| 45 | +@white-background-color: #fff; | ||
| 46 | + | ||
| 47 | +@bgColor: #F7F7F7; | ||
| 48 | +@titleColor: fade(#000, 85); | ||
| 49 | +@contentColor: fade(#000, 43); | ||
| 0 | \ No newline at end of file | 50 | \ No newline at end of file |
front-end/landing-page/src/Index-En/static/footer.less
0 → 100755
| 1 | +.home-page .home-footer-wrapper { | ||
| 2 | + height: 336px; | ||
| 3 | + background: #404040 !important; | ||
| 4 | + color: fade(#fff, 65); | ||
| 5 | + font-size: 14px; | ||
| 6 | + .home-layout { | ||
| 7 | + padding: 72px 32px 0; | ||
| 8 | + .copy{ | ||
| 9 | + color: fade(#fff, 43); | ||
| 10 | + } | ||
| 11 | + } | ||
| 12 | + .home-footer-nav-wrapper { | ||
| 13 | + margin: 48px auto 16px; | ||
| 14 | + > div { | ||
| 15 | + display: inline-block; | ||
| 16 | + padding: 0 36px; | ||
| 17 | + border-right: 1px solid #fff; | ||
| 18 | + &:last-child { | ||
| 19 | + border-right: none; | ||
| 20 | + } | ||
| 21 | + a { | ||
| 22 | + display: block; | ||
| 23 | + color: fade(#fff, 65); | ||
| 24 | + font-size: 16px; | ||
| 25 | + line-height: 16px; | ||
| 26 | + } | ||
| 27 | + } | ||
| 28 | + } | ||
| 29 | + .logo{ margin-bottom: 5px; } | ||
| 30 | +} | ||
| 0 | \ No newline at end of file | 31 | \ No newline at end of file |
front-end/landing-page/src/Index-En/static/header.less
0 → 100755
| 1 | +header { | ||
| 2 | + width: 100%; | ||
| 3 | + z-index: 1000; | ||
| 4 | + top: 0; | ||
| 5 | + background-color: #fff; | ||
| 6 | + .header-content { | ||
| 7 | + display: flex; | ||
| 8 | + justify-content: space-between; | ||
| 9 | + align-items: center; | ||
| 10 | + height: 64px; | ||
| 11 | + font-size: 14px; | ||
| 12 | + padding: 0 24px; | ||
| 13 | + width: 1152px; | ||
| 14 | + margin: 0 auto; | ||
| 15 | + h1 { | ||
| 16 | + position: relative; | ||
| 17 | + &:before { | ||
| 18 | + content: ""; | ||
| 19 | + position: absolute; | ||
| 20 | + top: 10px; | ||
| 21 | + left: 144px; | ||
| 22 | + width: 1px; | ||
| 23 | + height: 12px; | ||
| 24 | + background: #999; | ||
| 25 | + } | ||
| 26 | + a { | ||
| 27 | + display: block; | ||
| 28 | + width: 120px; | ||
| 29 | + height: 32px; | ||
| 30 | + background: url(https://gw.alipayobjects.com/zos/rmsportal/qdWihUzYxihpnOMVhFPV.png) no-repeat 0 50%; | ||
| 31 | + background-size: 120px 32px; | ||
| 32 | + text-indent: -999em; | ||
| 33 | + } | ||
| 34 | + span{ | ||
| 35 | + position: absolute; | ||
| 36 | + font-size: 14px; | ||
| 37 | + font-weight: 400; | ||
| 38 | + top: 6px; | ||
| 39 | + left: 168px; | ||
| 40 | + color: rgba(0,0,0,.65); | ||
| 41 | + white-space: nowrap; | ||
| 42 | + } | ||
| 43 | + } | ||
| 44 | + } | ||
| 45 | +} | ||
| 0 | \ No newline at end of file | 46 | \ No newline at end of file |
front-end/landing-page/src/Index-En/static/home.less
0 → 100755
| 1 | +@import './default.less'; | ||
| 2 | +.home-page { | ||
| 3 | + .fd-content { | ||
| 4 | + min-width: 1216px; | ||
| 5 | + background: #FFF; | ||
| 6 | + font-family: PingFangSC, Helvetica Neue, Helvetica, PingFang SC-Light, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; | ||
| 7 | + } | ||
| 8 | + h2, | ||
| 9 | + h3, | ||
| 10 | + h4, | ||
| 11 | + h5 { | ||
| 12 | + font-weight: 100; | ||
| 13 | + } | ||
| 14 | + .home-layout-wrapper { | ||
| 15 | + width: 100%; | ||
| 16 | + height: 720px; | ||
| 17 | + text-align: center; | ||
| 18 | + overflow: hidden; | ||
| 19 | + .home-layout { | ||
| 20 | + margin: 0 auto; | ||
| 21 | + width: 1152px; | ||
| 22 | + padding: 0 24px; | ||
| 23 | + overflow: hidden; | ||
| 24 | + height: 100%; | ||
| 25 | + >div { | ||
| 26 | + float: left; | ||
| 27 | + width: 100%; | ||
| 28 | + } | ||
| 29 | + .col { | ||
| 30 | + .content-wrapper { | ||
| 31 | + border-radius: 4px; | ||
| 32 | + background: #fff; | ||
| 33 | + cursor: pointer; | ||
| 34 | + overflow: hidden; | ||
| 35 | + position: relative; | ||
| 36 | + } | ||
| 37 | + } | ||
| 38 | + } | ||
| 39 | + &:nth-of-type(odd) { | ||
| 40 | + background: #fff; | ||
| 41 | + } | ||
| 42 | + &:nth-of-type(even) { | ||
| 43 | + background-color: @bgColor; | ||
| 44 | + } | ||
| 45 | + } | ||
| 46 | + h2, | ||
| 47 | + h3 { | ||
| 48 | + text-align: center; | ||
| 49 | + font-weight: normal; | ||
| 50 | + } | ||
| 51 | + h2 { | ||
| 52 | + font-size: 30px; | ||
| 53 | + line-height: 38px; | ||
| 54 | + color: @titleColor; | ||
| 55 | + margin-top: 88px; | ||
| 56 | + } | ||
| 57 | + h3 { | ||
| 58 | + font-size: 24px; | ||
| 59 | + line-height: 32px; | ||
| 60 | + margin-bottom: 16px; | ||
| 61 | + color: @titleColor; | ||
| 62 | + } | ||
| 63 | + .line { | ||
| 64 | + width: 40px; | ||
| 65 | + height: 2px; | ||
| 66 | + display: block; | ||
| 67 | + background: #FFBF00; | ||
| 68 | + margin: 16px auto 72px; | ||
| 69 | + } | ||
| 70 | + /* banner 区域 */ | ||
| 71 | + .home-banner { | ||
| 72 | + height: 656px; | ||
| 73 | + color: #fff; | ||
| 74 | + g, | ||
| 75 | + ellipse { | ||
| 76 | + transform-box: fill-box; | ||
| 77 | + } | ||
| 78 | + .home-layout { | ||
| 79 | + height: 100%; | ||
| 80 | + display: flex; | ||
| 81 | + align-items: center; | ||
| 82 | + padding-top: 0; | ||
| 83 | + text-align: left; | ||
| 84 | + } | ||
| 85 | + .home-banner-content-wrapper, | ||
| 86 | + .home-banner-image-wrapper { | ||
| 87 | + width: 50%; | ||
| 88 | + display: inline-block; | ||
| 89 | + } | ||
| 90 | + .home-banner-content-wrapper { | ||
| 91 | + height: 178px; | ||
| 92 | + margin-bottom: 40px; | ||
| 93 | + } | ||
| 94 | + h1 { | ||
| 95 | + font-size: 38px; | ||
| 96 | + line-height: 46px; | ||
| 97 | + margin-bottom: 16px; | ||
| 98 | + font-weight: normal; | ||
| 99 | + color: @titleColor; | ||
| 100 | + } | ||
| 101 | + p { | ||
| 102 | + margin-bottom: 40px; | ||
| 103 | + font-size: 20px; | ||
| 104 | + line-height: 28px; | ||
| 105 | + color: @contentColor; | ||
| 106 | + } | ||
| 107 | + span { | ||
| 108 | + display: inline-block; | ||
| 109 | + } | ||
| 110 | + button { | ||
| 111 | + width: 168px; | ||
| 112 | + height: 48px; | ||
| 113 | + font-size: 20px; | ||
| 114 | + } | ||
| 115 | + | ||
| 116 | + .ant-btn-group button { | ||
| 117 | + width: 48px; | ||
| 118 | + } | ||
| 119 | + .home-banner-image-wrapper { | ||
| 120 | + text-align: center; | ||
| 121 | + margin-top: -120px; | ||
| 122 | + } | ||
| 123 | + } | ||
| 124 | + /* 功能介绍 */ | ||
| 125 | + .home-func-wrapper { | ||
| 126 | + height: 720px; | ||
| 127 | + text-align: center; | ||
| 128 | + .image { | ||
| 129 | + height: 240px; | ||
| 130 | + position: relative; | ||
| 131 | + background-position: bottom center; | ||
| 132 | + background-repeat: no-repeat; | ||
| 133 | + background-size: 90% auto; | ||
| 134 | + margin-bottom: 62px; | ||
| 135 | + } | ||
| 136 | + .col { | ||
| 137 | + height: 400px; | ||
| 138 | + } | ||
| 139 | + p { | ||
| 140 | + font-size: 16px; | ||
| 141 | + color: @contentColor; | ||
| 142 | + } | ||
| 143 | + } | ||
| 144 | + .home-hover { | ||
| 145 | + border: 1px solid #E9E9E9; | ||
| 146 | + transition: transform .45s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow .45s cubic-bezier(0.645, 0.045, 0.355, 1), border .45s cubic-bezier(0.645, 0.045, 0.355, 1); | ||
| 147 | + &:hover { | ||
| 148 | + transform: translateY(-4px); | ||
| 149 | + box-shadow: 0 2px 24px fade(#000, 10); | ||
| 150 | + border-color: #fff; | ||
| 151 | + } | ||
| 152 | + } | ||
| 153 | + /* 案例 */ | ||
| 154 | + .home-case-wrapper { | ||
| 155 | + .col { | ||
| 156 | + .content-wrapper { | ||
| 157 | + height: 360px; | ||
| 158 | + padding: 16px; | ||
| 159 | + .image { | ||
| 160 | + width: 100%; | ||
| 161 | + height: 100%; | ||
| 162 | + border-radius: 2px; | ||
| 163 | + background-position: center; | ||
| 164 | + background-repeat: no-repeat; | ||
| 165 | + background-size: cover; | ||
| 166 | + } | ||
| 167 | + &:hover { | ||
| 168 | + .code-wrapper { | ||
| 169 | + opacity: 1; | ||
| 170 | + } | ||
| 171 | + } | ||
| 172 | + } | ||
| 173 | + .code-wrapper { | ||
| 174 | + position: absolute; | ||
| 175 | + background: fade(#fff, 90); | ||
| 176 | + width: 100%; | ||
| 177 | + height: 100%; | ||
| 178 | + top: 0; | ||
| 179 | + left: 0; | ||
| 180 | + opacity: 0; | ||
| 181 | + transition: opacity 0.45s cubic-bezier(0.165, 0.84, 0.44, 1); | ||
| 182 | + h4 { | ||
| 183 | + font-size: 16px; | ||
| 184 | + font-weight: normal; | ||
| 185 | + margin: 72px auto 12px; | ||
| 186 | + color: @titleColor; | ||
| 187 | + } | ||
| 188 | + } | ||
| 189 | + } | ||
| 190 | + } | ||
| 191 | + .home-serve-wrapper { | ||
| 192 | + height: 788px; | ||
| 193 | + text-align: center; | ||
| 194 | + .col { | ||
| 195 | + font-size: 16px; | ||
| 196 | + .content-wrapper { | ||
| 197 | + padding: 24px 16px; | ||
| 198 | + height: 440px; | ||
| 199 | + .icon-hover { | ||
| 200 | + opacity: 0; | ||
| 201 | + transition: opacity .45s; | ||
| 202 | + } | ||
| 203 | + &:hover { | ||
| 204 | + .icon-hover { | ||
| 205 | + opacity: 1; | ||
| 206 | + } | ||
| 207 | + p { | ||
| 208 | + color: fade(#000000, 65); | ||
| 209 | + } | ||
| 210 | + } | ||
| 211 | + } | ||
| 212 | + .image { | ||
| 213 | + width: 32px; | ||
| 214 | + height: 32px; | ||
| 215 | + margin: 8px auto 12px; | ||
| 216 | + } | ||
| 217 | + h3 { | ||
| 218 | + margin-bottom: 24px; | ||
| 219 | + } | ||
| 220 | + p { | ||
| 221 | + margin-bottom: 12px; | ||
| 222 | + color: @contentColor; | ||
| 223 | + transition: color .3s; | ||
| 224 | + font-weight: 400; | ||
| 225 | + } | ||
| 226 | + .exp { | ||
| 227 | + position: absolute; | ||
| 228 | + bottom: 24px; | ||
| 229 | + left: 0; | ||
| 230 | + width: 100%; | ||
| 231 | + font-size: 20px; | ||
| 232 | + color: fade(#000, 25); | ||
| 233 | + } | ||
| 234 | + } | ||
| 235 | + } | ||
| 236 | + .home-user-wrapper { | ||
| 237 | + height: 440px; | ||
| 238 | + h2 { | ||
| 239 | + margin-top: 64px; | ||
| 240 | + } | ||
| 241 | + .col { | ||
| 242 | + margin-bottom: 32px; | ||
| 243 | + i { | ||
| 244 | + display: block; | ||
| 245 | + width: 170px; | ||
| 246 | + height: 56px; | ||
| 247 | + background-repeat: no-repeat; | ||
| 248 | + background-position: center; | ||
| 249 | + margin: auto; | ||
| 250 | + } | ||
| 251 | + } | ||
| 252 | + } | ||
| 253 | +} | ||
| 0 | \ No newline at end of file | 254 | \ No newline at end of file |
front-end/landing-page/src/Index-En/static/responsive.less
0 → 100755
front-end/landing-page/src/Index-En/static/style.js
0 → 100755
front-end/landing-page/src/Index/Page3.jsx
| @@ -10,7 +10,7 @@ export default function Page3() { | @@ -10,7 +10,7 @@ export default function Page3() { | ||
| 10 | <QueueAnim | 10 | <QueueAnim |
| 11 | type="bottom" | 11 | type="bottom" |
| 12 | className="content-wrapper home-hover" | 12 | className="content-wrapper home-hover" |
| 13 | - onClick={() => { window.location.href = '/intro/price '; }} | 13 | + onClick={() => { }} |
| 14 | > | 14 | > |
| 15 | <div key="image" className="image">{d.svg}</div> | 15 | <div key="image" className="image">{d.svg}</div> |
| 16 | <h3 key="h3">{d.title}</h3> | 16 | <h3 key="h3">{d.title}</h3> |
front-end/landing-page/src/Page2/data.source.js
| 1 | import React from 'react'; | 1 | import React from 'react'; |
| 2 | 2 | ||
| 3 | -export const Nav00DataSource = { | ||
| 4 | - wrapper: { className: 'header0 home-page-wrapper' }, | ||
| 5 | - page: { className: 'home-page' }, | ||
| 6 | - logo: { | ||
| 7 | - className: 'header0-logo', | ||
| 8 | - children: 'https://os.alipayobjects.com/rmsportal/mlcYmsRilwraoAe.svg', | ||
| 9 | - }, | ||
| 10 | - Menu: { | ||
| 11 | - className: 'header0-menu', | ||
| 12 | - children: [ | ||
| 13 | - { name: 'item0', a: { children: '导航一', href: '' } }, | ||
| 14 | - { name: 'item1', a: { children: '导航二', href: '' } }, | ||
| 15 | - { name: 'item2', a: { children: '导航三', href: '' } }, | ||
| 16 | - { name: 'item3', a: { children: '导航四', href: '' } }, | ||
| 17 | - ], | ||
| 18 | - }, | ||
| 19 | - mobileMenu: { className: 'header0-mobile-menu' }, | ||
| 20 | -}; | ||
| 21 | export const Banner00DataSource = { | 3 | export const Banner00DataSource = { |
| 22 | wrapper: { className: 'banner0' }, | 4 | wrapper: { className: 'banner0' }, |
| 23 | textWrapper: { className: 'banner0-text-wrapper' }, | 5 | textWrapper: { className: 'banner0-text-wrapper' }, |
front-end/landing-page/src/layouts/Nav0.jsx
| @@ -61,7 +61,7 @@ class Header extends React.Component { | @@ -61,7 +61,7 @@ class Header extends React.Component { | ||
| 61 | > | 61 | > |
| 62 | {/* <img width="100%" src={dataSource.logo.children} alt="img" /> */} | 62 | {/* <img width="100%" src={dataSource.logo.children} alt="img" /> */} |
| 63 | <h1> | 63 | <h1> |
| 64 | - <a href="">Luban H5</a> | 64 | + <a href="/">Luban H5</a> |
| 65 | </h1> | 65 | </h1> |
| 66 | </TweenOne> | 66 | </TweenOne> |
| 67 | <TweenOne | 67 | <TweenOne |
| @@ -95,17 +95,17 @@ class Header extends React.Component { | @@ -95,17 +95,17 @@ class Header extends React.Component { | ||
| 95 | defaultSelectedKeys={['0']} | 95 | defaultSelectedKeys={['0']} |
| 96 | theme={isMobile ? 'dark' : 'default'} | 96 | theme={isMobile ? 'dark' : 'default'} |
| 97 | > | 97 | > |
| 98 | - {/* {navChildren} */} | 98 | + {navChildren} |
| 99 | <SubMenu | 99 | <SubMenu |
| 100 | style={{color: 'black'}} | 100 | style={{color: 'black'}} |
| 101 | title={ | 101 | title={ |
| 102 | <span className="submenu-title-wrapper"> | 102 | <span className="submenu-title-wrapper"> |
| 103 | - <Icon type="appstore" /> | ||
| 104 | - 相关链接 | 103 | + {/* <Icon type="appstore" /> */} |
| 104 | + 🔗Links | ||
| 105 | </span> | 105 | </span> |
| 106 | } | 106 | } |
| 107 | > | 107 | > |
| 108 | - <Menu.ItemGroup title="项目地址"> | 108 | + <Menu.ItemGroup title="Project URL"> |
| 109 | <Menu.Item key="setting:3" onClick={() => { | 109 | <Menu.Item key="setting:3" onClick={() => { |
| 110 | window.open('https://api.luban-h5.wxjcart.com/main') | 110 | window.open('https://api.luban-h5.wxjcart.com/main') |
| 111 | }}>Website</Menu.Item> | 111 | }}>Website</Menu.Item> |
| @@ -116,7 +116,10 @@ class Header extends React.Component { | @@ -116,7 +116,10 @@ class Header extends React.Component { | ||
| 116 | window.open('https://gitee.com/ly525/luban-h5') | 116 | window.open('https://gitee.com/ly525/luban-h5') |
| 117 | }}>Gitee</Menu.Item> | 117 | }}>Gitee</Menu.Item> |
| 118 | </Menu.ItemGroup> | 118 | </Menu.ItemGroup> |
| 119 | - <Menu.ItemGroup title="联系方式"> | 119 | + <Menu.ItemGroup title="Contact"> |
| 120 | + <Menu.Item key="setting:5.0" onClick={() => { | ||
| 121 | + window.open('https://gitter.im/luban-h5/community') | ||
| 122 | + }}>Gitter</Menu.Item> | ||
| 120 | <Menu.Item key="setting:5.0" onClick={() => { | 123 | <Menu.Item key="setting:5.0" onClick={() => { |
| 121 | window.open('https://support.qq.com/products/93432/') | 124 | window.open('https://support.qq.com/products/93432/') |
| 122 | }}>论坛</Menu.Item> | 125 | }}>论坛</Menu.Item> |
front-end/landing-page/src/layouts/data.source.js
| @@ -10,10 +10,10 @@ export const Nav00DataSource = { | @@ -10,10 +10,10 @@ export const Nav00DataSource = { | ||
| 10 | Menu: { | 10 | Menu: { |
| 11 | className: 'header0-menu', | 11 | className: 'header0-menu', |
| 12 | children: [ | 12 | children: [ |
| 13 | - { name: 'item0', a: { children: '导航一', href: '/' } }, | ||
| 14 | - { name: 'item1', a: { children: '导航二', href: '/page2' } }, | ||
| 15 | - { name: 'item2', a: { children: '导航三', href: '' } }, | ||
| 16 | - { name: 'item3', a: { children: '导航四', href: '' } }, | 13 | + { name: 'item0', a: { children: '中文', href: '/' } }, |
| 14 | + { name: 'item1', a: { children: 'EN', href: '/index-en' } }, | ||
| 15 | + // { name: 'item2', a: { children: '导航三', href: '/page2' } }, | ||
| 16 | + // { name: 'item3', a: { children: '导航四', href: '' } }, | ||
| 17 | ], | 17 | ], |
| 18 | }, | 18 | }, |
| 19 | mobileMenu: { className: 'header0-mobile-menu' }, | 19 | mobileMenu: { className: 'header0-mobile-menu' }, |
front-end/landing-page/src/pages/.umi/history.js
| 1 | // create history | 1 | // create history |
| 2 | -const history = require('umi/lib/createHistory').default({ | ||
| 3 | - basename: window.routerBase, | ||
| 4 | -}); | 2 | +const history = require('history/createHashHistory').default({ basename: '/' }); |
| 5 | window.g_history = history; | 3 | window.g_history = history; |
| 6 | export default history; | 4 | export default history; |
front-end/landing-page/src/pages/.umi/router.js
| @@ -12,6 +12,11 @@ const routes = [ | @@ -12,6 +12,11 @@ const routes = [ | ||
| 12 | component: require('../../layouts/index.js').default, | 12 | component: require('../../layouts/index.js').default, |
| 13 | routes: [ | 13 | routes: [ |
| 14 | { | 14 | { |
| 15 | + path: '/index-en', | ||
| 16 | + exact: true, | ||
| 17 | + component: require('../index-en.js').default, | ||
| 18 | + }, | ||
| 19 | + { | ||
| 15 | path: '/', | 20 | path: '/', |
| 16 | exact: true, | 21 | exact: true, |
| 17 | component: require('../index.js').default, | 22 | component: require('../index.js').default, |