├── .eslintrc
├── .gitignore
├── README.md
├── deploy.js
├── index.html
├── index.js
├── package.json
├── src
└── Home
│ ├── Banner.jsx
│ ├── BannerImage.jsx
│ ├── Footer.jsx
│ ├── Header.jsx
│ ├── Page1.jsx
│ ├── Page2.jsx
│ ├── Page3.jsx
│ ├── Page4.jsx
│ ├── Page5.jsx
│ ├── data.js
│ ├── index.jsx
│ └── static
│ ├── custom.less
│ ├── default.less
│ ├── footer.less
│ ├── header.less
│ ├── home.less
│ ├── responsive.less
│ └── style.js
└── webpack.config.js
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "eslint-config-airbnb",
3 | "parser": "babel-eslint",
4 | "rules": {
5 | "import/no-unresolved": 0,
6 | "react/jsx-no-target-blank": 0,
7 | "jsx-a11y/anchor-is-valid": 0,
8 | "react/jsx-no-comment-textnodes": 0,
9 | "react/require-default-props": 0
10 | }
11 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | .DS_Store
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ### ant v
2 |
3 | ant v 里的 landing page.
4 |
5 | 脚手架使用的是： [antd-init](https://github.com/ant-design/antd-init);
6 |
7 | ## preview
8 |
9 | https://antv.alipay.com/zh-cn/index.html
10 |
11 | https://ant-motion.github.io/ant-v-landing-page/
12 |
13 |
14 | ## install
15 | ```
16 | $ npm i
17 | ```
18 |
19 | ## Development
20 |
21 | ```
22 | $ npm start
23 | ```
--------------------------------------------------------------------------------
/deploy.js:
--------------------------------------------------------------------------------
1 | var ghPages = require('gh-pages');
2 | var path = require('path');
3 | ghPages.publish(path.join(process.cwd(), 'dist'), {
4 | depth: 1,
5 | logger: function (message) {
6 | console.log(message);
7 | }
8 | }, function (err) {
9 | if (err) {
10 | throw err;
11 | }
12 | console.log('Site has been published.');
13 | });
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Demo
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import Home from './src/Home';
4 |
5 | function App() {
6 | return (
7 |
8 | );
9 | }
10 |
11 | ReactDOM.render(, document.getElementById('root'));
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "entry": {
4 | "index": "./index.js"
5 | },
6 | "dependencies": {
7 | "antd": "^3.0.0",
8 | "enquire-js": "^0.1.0",
9 | "prop-types": "^15.6.0",
10 | "rc-queue-anim": "^1.4.0",
11 | "rc-scroll-anim": "^2.1.0",
12 | "rc-tween-one": "^1.5.5",
13 | "react": "^16.1.1",
14 | "react-document-title": "^2.0.3",
15 | "react-dom": "^16.1.1",
16 | "react-github-button": "^0.1.11"
17 | },
18 | "devDependencies": {
19 | "atool-build": "^1.0.2",
20 | "atool-test-mocha": "^0.1.7",
21 | "babel-eslint": "^8.0.2",
22 | "babel-plugin-import": "^1.6.2",
23 | "babel-plugin-transform-runtime": "^6.23.0",
24 | "babel-runtime": "^6.26.0",
25 | "dora": "^0.4.5",
26 | "dora-plugin-webpack": "^1.0.0",
27 | "eslint": "^4.11.0",
28 | "eslint-config-airbnb": "^16.1.0",
29 | "eslint-plugin-import": "^2.8.0",
30 | "eslint-plugin-jsx-a11y": "^6.0.2",
31 | "eslint-plugin-react": "^7.5.1",
32 | "expect": "^21.2.1",
33 | "gh-pages": "^1.1.0",
34 | "pre-commit": "^1.2.2",
35 | "redbox-react": "^1.5.0"
36 | },
37 | "pre-commit": [
38 | "lint"
39 | ],
40 | "scripts": {
41 | "build": "atool-build && cp index.html dist",
42 | "lint": "eslint --ext .js,.jsx src/",
43 | "eslint-fix": "eslint --fix src/ --ext .js,.jsx",
44 | "start": "dora --plugins webpack",
45 | "test": "atool-test-mocha ./**/__tests__/*-test.js",
46 | "deploy": "rm -rf dist && npm run build && node ./deploy.js"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/Home/Banner.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import QueueAnim from 'rc-queue-anim';
4 | import { Button } from 'antd';
5 | import { Element } from 'rc-scroll-anim';
6 | import BannerImage from './BannerImage';
7 | import { assets } from './data';
8 |
9 | class Banner extends React.PureComponent {
10 | static propTypes = {
11 | className: PropTypes.string,
12 | isMobile: PropTypes.bool,
13 | navToShadow: PropTypes.func,
14 | }
15 | static defaultProps = {
16 | className: 'banner',
17 | }
18 | render() {
19 | const { className, isMobile, navToShadow } = this.props;
20 | return (
21 |
22 |
23 |
24 | {isMobile ?
25 |
26 | :
27 |
}
28 |
29 |
34 | 让数据栩栩如生
35 |
36 | AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。
37 |
38 |
39 |
42 |
43 |
44 |
{card.title}
11 | 
12 |
13 | {card.title}
14 | {card.description}
15 |
16 |
17 |
18 | ));
19 |
20 | return (
21 |
22 |
28 | {children}
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/src/Home/Page2.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import QueueAnim from 'rc-queue-anim';
3 | import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
4 |
5 | export default function Page2() {
6 | return (
7 |
8 |
14 | AntV 可视化解决方案
15 |
16 |
17 | 已全面全新升级，主要包含 G2、G6、F2 以及一套完整的图表使用和设计规范。
18 | 得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 2000+ 业务系统，通过了百万级 UV 产品的严苛考验后方敢与君见。
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/Home/Page3.jsx:
--------------------------------------------------------------------------------
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((card, i) => (
9 |
14 |
15 | {card.title}
16 | {card.description}
17 |
18 | ));
19 | return (
20 |
21 |
28 | {children}
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/src/Home/Page4.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Carousel } from 'antd';
4 | import QueueAnim from 'rc-queue-anim';
5 | import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
6 | import { page4, assets } from './data';
7 |
8 | export default function Page4(props) {
9 | const children = page4.map((item, i) => (
10 |
11 | 
12 |
13 | {!props.isMobile &&
}
14 |
{item.comment}
15 |
{item.name}
17 | {item.profile}
18 |
19 | ));
20 | return (
21 |
22 |
28 |
29 |
30 | {children}
31 |
32 |
33 |
34 |
35 | );
36 | }
37 |
38 | Page4.propTypes = {
39 | isMobile: PropTypes.bool,
40 | };
41 |
--------------------------------------------------------------------------------
/src/Home/Page5.jsx:
--------------------------------------------------------------------------------
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 { page5 } from './data';
6 |
7 | export default function Page5() {
8 | const children = page5.map((img, i) => (
9 |
18 | 
19 |
20 | ));
21 | return (
22 |
23 |
29 | 2000+用户正在使用
30 |
31 |
35 | {children}
36 |
37 |
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/src/Home/data.js:
--------------------------------------------------------------------------------
1 | export const assets = 'https://gw.alipayobjects.com/os/s/prod/antv/assets';
2 | const base = 'https://antv.alipay.com/';
3 | export const page1 = [
4 | {
5 | img: `${assets}/image/icon/g2-c94ef.svg`,
6 | href: `${base}zh-cn/g2/3.x/index.html`,
7 | title: 'G2',
8 | description: ' 是以数据为驱动，具有高度的易用性和扩展性的可视化图形语法。',
9 | },
10 | {
11 | img: `${assets}/image/icon/g6-b4554.svg`,
12 | title: 'G6',
13 | href: `${base}zh-cn/g6/1.x/index.html`,
14 | description: ' 是一套便捷、动态和富有交互的流程图和关系分析的图表库。',
15 | },
16 | {
17 | img: `${assets}/image/icon/f2-d360c.svg`,
18 | title: 'F2',
19 | href: `${base}zh-cn/f2/3.x/index.html`,
20 | description: ' 是一套精简、高性能、易扩展的的移动端图表库。',
21 | },
22 | ];
23 |
24 | export const page3 = [
25 | {
26 | img: `${assets}/image/home/features-simple-9617c.svg`,
27 | title: '简单方便',
28 | description: '从数据出发，仅需几行代码就可以轻松获得想要的图表展示效果。',
29 | },
30 | {
31 | img: `${assets}/image/home/features-professional-1c6d1.svg`,
32 | title: '专业可靠',
33 | description: '大量产品实践之上，提供绘图引擎，完备图形语法以及专业设计规范。',
34 | },
35 | {
36 | img: `${assets}/image/home/features-powerful-243e3.svg`,
37 | title: '无限可能',
38 | description: '任何图表，都可以基于图形语法灵活绘制，满足你无限的创意。',
39 | },
40 | ];
41 |
42 | export const page4 = [
43 | {
44 | name: '陈为',
45 | profile: '浙江大学计算机学院 CAD & CG 国家重点实验室教授 可视化专家',
46 | avatar: 'https://os.alipayobjects.com/rmsportal/CcFeLxXurbQmwrT.jpg',
47 | comment: '在多年可视化设计与开发的积累基础上，蚂蚁金服团队推出了 AntV 产品，这是工业界在基础可视化语法与实践方面发出的最强声音，也是工业界与学术界一道推进可视化研发进展的最佳利器。',
48 | },
49 | {
50 | name: '林峰',
51 | profile: '爱烹饪的数据可视化攻城狮',
52 | avatar: 'https://zos.alipayobjects.com/rmsportal/wtkIALmYDSmOIiAalkdv.jpg',
53 | comment: 'G2 是面粉，ECharts 是面条，皆微小但美好，因小食材怀大梦想，助力共筹东方巨龙崛起之盛宴，迎四海饕客。',
54 | },
55 | ];
56 |
57 | export const page5 = [
58 | `${assets}/image/home/aliyun-f111c.png`,
59 | `${assets}/image/home/alipay-fceea.png`,
60 | `${assets}/image/home/tmall-cb94f.png`,
61 | `${assets}/image/home/taobao-ade5b.png`,
62 | `${assets}/image/home/mybank-da103.png`,
63 | `${assets}/image/home/jd-23e52.png`,
64 | `${assets}/image/home/yunos-2edef.png`,
65 | `${assets}/image/home/cainiao-40fc8.png`,
66 | ];
67 |
--------------------------------------------------------------------------------
/src/Home/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import DocumentTitle from 'react-document-title';
3 | import { enquireScreen } from 'enquire-js';
4 | import Header from './Header';
5 | import Banner from './Banner';
6 | import Page1 from './Page1';
7 | import Page2 from './Page2';
8 | import Page3 from './Page3';
9 | import Page4 from './Page4';
10 | import Page5 from './Page5';
11 | import Footer from './Footer';
12 | import './static/style';
13 |
14 |
15 | let isMobile = false;
16 | enquireScreen((b) => {
17 | isMobile = b;
18 | });
19 |
20 |
21 | class Home extends React.PureComponent {
22 | state = {
23 | isMobile,
24 | showShadow: false,
25 | };
26 |
27 | componentDidMount() {
28 | enquireScreen((b) => {
29 | this.setState({
30 | isMobile: !!b,
31 | });
32 | });
33 | }
34 | navToShadow = (e) => {
35 | this.setState({ showShadow: e.mode === 'leave' });
36 | }
37 | render() {
38 | return (
39 | [
40 | ,
41 | ,
42 | ,
43 | ,
44 | ,
45 | ,
46 | ,
47 | ,
48 | ,
49 | ]
50 | );
51 | }
52 | }
53 | export default Home;
54 |
--------------------------------------------------------------------------------
/src/Home/static/custom.less:
--------------------------------------------------------------------------------
1 | body {
2 | // overflow: hidden;
3 | }
4 |
5 | .text-center {
6 | text-align: center!important;
7 | }
8 |
--------------------------------------------------------------------------------
/src/Home/static/default.less:
--------------------------------------------------------------------------------
1 | @import "~antd/lib/style/themes/default.less";
2 | @site-heading-color: #0d1a26;
3 | @site-text-color: #314659;
4 | @site-text-color-secondary: #697b8c;
5 | @site-border-color-split: #ebedf0;
6 | @border-color: rgba(229, 231, 235, 100);
7 | @padding-space: 114px;
8 |
--------------------------------------------------------------------------------
/src/Home/static/footer.less:
--------------------------------------------------------------------------------
1 | @import './default';
2 |
3 | footer.dark {
4 | background-color: #000;
5 | color: rgba(255, 255, 255, 0.65);
6 | a {
7 | color: #fff;
8 | }
9 | h2 {
10 | color: rgba(255, 255, 255, 1);
11 | & > span {
12 | color: rgba(255, 255, 255, 1);
13 | }
14 | }
15 | .bottom-bar {
16 | border-top: 1px solid rgba(255, 255, 255, 0.25);
17 | overflow: hidden;
18 | }
19 | }
20 |
21 | footer {
22 | border-top: 1px solid @border-color;
23 | clear: both;
24 | font-size: 12px;
25 | background: #fff;
26 | position: relative;
27 | z-index: 100;
28 | color: @site-text-color;
29 | box-shadow: 0 1000px 0 1000px #fff;
30 | .ant-row {
31 | text-align: center;
32 | .footer-center {
33 | display: inline-block;
34 | text-align: left;
35 | > h2 {
36 | font-size: 14px;
37 | margin: 0 auto 24px;
38 | font-weight: 500;
39 | position: relative;
40 | > .anticon {
41 | font-size: 16px;
42 | position: absolute;
43 | left: -22px;
44 | top: 3px;
45 | color: #aaa;
46 | }
47 | }
48 | > div {
49 | margin: 12px 0;
50 | }
51 | }
52 | }
53 | .footer-wrap {
54 | position: relative;
55 | padding: 86px @padding-space 70px @padding-space;
56 | }
57 | .bottom-bar {
58 | border-top: 1px solid @border-color;
59 | text-align: right;
60 | padding: 20px @padding-space;
61 | margin: 0;
62 | line-height: 24px;
63 | a {
64 | color: rgba(255, 255, 255, 0.65);
65 | &:hover {
66 | color: #fff;
67 | }
68 | }
69 | .translate-button {
70 | text-align: left;
71 | width: 200px;
72 | margin: 0 auto;
73 | }
74 | }
75 | .footer-logo {
76 | position: relative;
77 | top: -2px;
78 | }
79 | .footer-flag {
80 | position: relative;
81 | top: -4px;
82 | margin-right: 8px;
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/src/Home/static/header.less:
--------------------------------------------------------------------------------
1 | header {
2 | position: fixed;
3 | z-index: 1000;
4 | height: 64px;
5 | padding: 0 32px;
6 | width: 100%;
7 | background: #F8FAFE;
8 | transition: box-shadow .3s ease-out, background .3s ease-out;
9 | &.show-shadow{
10 | background: #FDFDFD;
11 | box-shadow: 0 2px 8px rgba(229, 229, 229, 0.5);
12 | }
13 | .logo {
14 | background: url(https://gw.alipayobjects.com/zos/rmsportal/sDUzcQUsFXjBgcHNCuiv.svg) no-repeat center;
15 | display: inline-block;
16 | width: 40px;
17 | height: 64px;
18 | &-wrapper {
19 | display: inline-block;
20 | height: 100%;
21 | line-height: 64px;
22 | span {
23 | line-height: 64px;
24 | font-size: 20px;
25 | margin-right: 18px;
26 | white-space: nowrap;
27 | color: rgba(0,0,0,.9);
28 | display: inline-block;
29 | vertical-align: top;
30 | }
31 | }
32 | }
33 | .button{
34 | float: right;
35 | height: 100%;
36 | line-height: 64px;
37 | .ant-btn{
38 | border-radius: 32px;
39 | font-size: 14px;
40 | line-height: 32px;
41 | height: 32px;
42 | }
43 | }
44 | }
--------------------------------------------------------------------------------
/src/Home/static/home.less:
--------------------------------------------------------------------------------
1 | @import "./default.less";
2 | @import "./custom.less";
3 | #reat-content {
4 | font-family: Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
5 | }
6 |
7 | .intro .header {
8 | padding-top: 0;
9 | padding-left: 0;
10 | padding-right: 0;
11 | }
12 |
13 | h2,
14 | h3,
15 | h4,
16 | h5,
17 | h6 {
18 | font-weight: 400;
19 | }
20 |
21 | .btn {
22 | transition: all .3s @ease-out;
23 | }
24 |
25 | .page-wrapper {
26 | width: 100%;
27 | padding: 0;
28 | overflow: hidden;
29 | .page {
30 | width: 90%;
31 | max-width: 1200px;
32 | margin: auto;
33 | position: relative;
34 | h2 {
35 | margin-bottom: 30px;
36 | font-size: 2rem;
37 | }
38 | .separator {
39 | margin-bottom: 65px;
40 | display: inline-block;
41 | width: 30px;
42 | height: 5px;
43 | background: #1890FF;
44 | border-radius: 2.5px;
45 | }
46 | }
47 | }
48 |
49 | .card {
50 | text-decoration: none;
51 | .title,
52 | .description {
53 | color: rgba(0, 0, 0, 0.65)!important;
54 | font-size: 14px;
55 | font-weight: 300;
56 | }
57 | }
58 |
59 | .card:hover {
60 | .title {
61 | color: rgba(0, 0, 0, 0.65)!important;
62 | }
63 | }
64 |
65 | .features img {
66 | margin-top: 0 !important;
67 | }
68 |
69 | .page {
70 | h2,
71 | h4,
72 | h5,
73 | span,
74 | p,
75 | a,
76 | .feature,
77 | .card-wrapper,
78 | .main-info,
79 | .detail {
80 | will-change: transform;
81 | }
82 | .main-info {
83 | line-height: 36px;
84 | }
85 | }
86 |
87 | .banner {
88 | height: 100%;
89 | max-width: 1500px;
90 | margin: auto;
91 | position: relative;
92 | svg {
93 | display: block;
94 | margin-left: -30px;
95 | padding-top: 20px;
96 | }
97 | &-wrapper {
98 | background: #f8fafe;
99 | padding-top: 64px;
100 | height: 620px;
101 | overflow: hidden;
102 | }
103 | >div {
104 | display: inline-block;
105 | }
106 | &-img-wrapper {
107 | width: 60%;
108 | height: 100%;
109 | }
110 | &-text-wrapper {
111 | width: 40%;
112 | padding-right: 114px;
113 | height: 265px;
114 | position: absolute;
115 | margin: auto;
116 | top: 0;
117 | bottom: 0;
118 | h1 {
119 | font-size: 46px;
120 | }
121 | p {
122 | font-size: 16px;
123 | margin: 50px 0 60px;
124 | font-weight: 300;
125 | }
126 | a {
127 | display: inline-block;
128 | .ant-btn {
129 | height: 40px;
130 | font-size: 16px;
131 | border-radius: 20px;
132 | padding: 10px 24px;
133 | &:hover {
134 | box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
135 | transform: translateY(-4px);
136 | }
137 | }
138 | }
139 | }
140 | }
141 |
142 | .page1 {
143 | background: #f8fafe;
144 | padding-bottom: 100px;
145 | overflow: initial;
146 | min-height: 372px;
147 | .card {
148 | transition: transform .3s @ease-out, box-shadow .3s @ease-out;
149 | position: relative;
150 | color: #868e96;
151 | display: inline-block;
152 | max-width: 360px;
153 | height: 272px;
154 | padding: 32px;
155 | box-shadow: 0 2px 2px rgba(84, 48, 132, 0.06);
156 | margin: 0 auto;
157 | flex-direction: column;
158 | word-wrap: break-word;
159 | background-color: #fff;
160 | background-clip: border-box;
161 | text-align: center;
162 | border-radius: 4px;
163 | .card-img-top {
164 | width: 100%;
165 | border-top-left-radius: calc(.25rem - 1px);
166 | border-top-right-radius: calc(.25rem - 1px);
167 | }
168 | h3 {
169 | font-size: 30px;
170 | }
171 | img {
172 | height: 50px;
173 | margin: 20px 0;
174 | }
175 | &:hover {
176 | text-decoration: none;
177 | transform: translateY(-12px);
178 | box-shadow: 0 12px 24px rgba(84, 48, 132, 0.06);
179 | }
180 | }
181 | }
182 |
183 | .page2 {
184 | min-height: 555px;
185 | .page {
186 | padding: 112px 0 146px;
187 | }
188 | .info-content {
189 | max-width: 900px;
190 | line-height: 48px;
191 | margin: 0 auto;
192 | font-size: 20px;
193 | font-weight: 300;
194 | }
195 | }
196 |
197 | .page3 {
198 | min-height: 521px;
199 | background: #544ff9;
200 | background: linear-gradient(to right, #544ff9 0%, #7351f4 26%, #874bff 100%);
201 | color: #C3D1FF;
202 | .page {
203 | padding: 130px 0 156px;
204 | img {
205 | width: 96px;
206 | margin: 0 32px 32px;
207 | }
208 | h5 {
209 | color: white;
210 | margin-bottom: 16px;
211 | font-size: 20px;
212 | font-weight: 400;
213 | }
214 | .detail {
215 | display: inline-block;
216 | max-width: 240px;
217 | font-size: 14px;
218 | font-weight: 300;
219 | line-height: 26px;
220 | }
221 | }
222 | }
223 |
224 | .page4 {
225 | min-height: 715px;
226 | padding: 130px 0;
227 | background: #F8FAFE;
228 | .slick-slide {
229 | height: 455px;
230 | .user {
231 | width: 98px;
232 | height: 98px;
233 | border-radius: 100%;
234 | margin: auto;
235 | }
236 | .comment {
237 | line-height: 48px;
238 | font-size: 20px;
239 | width: 100%;
240 | max-width: 680px;
241 | margin: 41px auto 47px;
242 | position: relative;
243 | color: #545454;
244 | font-weight: 300;
245 | >img {
246 | position: absolute;
247 | left: -40px;
248 | top: -15px;
249 | }
250 | }
251 | >h4 {
252 | font-size: 30px;
253 | line-height: 38px;
254 | font-weight: normal;
255 | }
256 | >p {
257 | margin-top: 16px;
258 | font-size: 14px;
259 | color: #888888;
260 | font-weight: 300;
261 | }
262 | }
263 | .slick-dots li {
264 | margin: 0 8px;
265 | button {
266 | transition: opacity .3s;
267 | width: 10px !important;
268 | height: 10px !important;
269 | background: #1890FF;
270 | border-radius: 100%;
271 | &:hover,
272 | &:focus {
273 | &::before {
274 | opacity: 1;
275 | background: #1890FF;
276 | width: 20px;
277 | height: 20px;
278 | }
279 | }
280 | &::before {
281 | transition: color .3s;
282 | }
283 | }
284 | &.slick-active {
285 | button {
286 | background: #1890FF;
287 | &::before {
288 | opacity: 1;
289 | background: #1890FF;
290 | }
291 | }
292 | }
293 | }
294 | }
295 |
296 | .page5 {
297 | min-height: 590px;
298 | h2 {
299 | margin: 120px auto 25px;
300 | }
301 | >span {
302 | margin-bottom: 72px;
303 | }
304 | .ant-row>div {
305 | margin-bottom: 20px;
306 | }
307 | }
--------------------------------------------------------------------------------
/src/Home/static/responsive.less:
--------------------------------------------------------------------------------
1 | @import "./default.less";
2 | @media only screen and (max-width: @screen-md) {
3 | .banner-wrapper {
4 | height: 100vh;
5 | .banner {
6 | overflow: hidden;
7 | .banner-img-wrapper,
8 | .banner-text-wrapper {
9 | width: 90%;
10 | margin: auto;
11 | display: block;
12 | position: relative;
13 | }
14 | .banner-img-wrapper {
15 | height: auto;
16 | margin: 40px auto;
17 | }
18 | .banner-text-wrapper {
19 | text-align: center;
20 | padding: 0;
21 | p {
22 | margin: 8% 0;
23 | line-height: 1.5em;
24 | }
25 | }
26 | }
27 | }
28 | .main-info {
29 | font-size: 16px;
30 | line-height: 2em;
31 | }
32 | .page2 {
33 | .info-content{
34 | font-size: 14px;
35 | line-height: 2em;
36 | }
37 | }
38 | .page3{
39 | .ant-row > div {
40 | margin: 24px 0;
41 | }
42 | }
43 | .page4 .slick-slide .comment {
44 | font-size: 16px;
45 | line-height: 2em;
46 | }
47 | .page4 .slick-slide>p {
48 | font-size: 12px;
49 | }
50 | .page5{
51 | min-height: 1100px;
52 | }
53 | footer .ant-row .footer-center{
54 | text-align: center;
55 | }
56 | #footer .footer-wrap {
57 | padding: 40px;
58 |
59 | }
60 | footer.dark .bottom-bar{
61 | padding: 20px 8px;
62 | text-align: center;
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/src/Home/static/style.js:
--------------------------------------------------------------------------------
1 | import './header.less';
2 | import './home.less';
3 | import './footer.less';
4 | import './responsive.less';
5 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | // Learn more on how to config.
2 | // - https://github.com/ant-tool/atool-build#配置扩展
3 |
4 | module.exports = function(webpackConfig) {
5 | webpackConfig.babel.plugins.push('transform-runtime');
6 | webpackConfig.babel.plugins.push(['import', {
7 | libraryName: 'antd',
8 | style: 'css',
9 | }]);
10 |
11 | return webpackConfig;
12 | };
13 |
--------------------------------------------------------------------------------