@antv/dumi-theme-antv 0.4.3 → 0.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,7 @@
1
- import React from 'react';
2
1
  import '../slots/global';
3
2
  import '../slots/_.less';
4
3
  /**
5
4
  * DocuLayout 是 dumi2 的内置 layout 入口,在这里使用页面路径进行区分成自己不同的 Layout。
6
5
  */
7
- declare const _default: () => React.JSX.Element;
6
+ declare const _default: () => any;
8
7
  export default _default;
@@ -13,7 +13,7 @@ import { Features } from "dumi/theme/slots/Features";
13
13
  import { Cases } from "dumi/theme/slots/Cases";
14
14
  import { Companies } from "dumi/theme/slots/Companies";
15
15
  import { Footer } from "dumi/theme/slots/Footer";
16
- import { size } from 'lodash-es';
16
+ import { isArray, size, get } from 'lodash-es';
17
17
 
18
18
  /**
19
19
  * Index 路由下的入口
@@ -52,7 +52,8 @@ export var Index = function Index() {
52
52
  news: news
53
53
  }, detail);
54
54
  var featuresProps = {
55
- features: features,
55
+ title: get(features, ['title']),
56
+ features: isArray(features) ? features : get(features, ['cards'], []),
56
57
  className: className,
57
58
  style: style,
58
59
  id: id
@@ -67,7 +68,7 @@ export var Index = function Index() {
67
68
  title: "".concat(metaTitle[locale.id]),
68
69
  titleSuffix: "AntV",
69
70
  lang: locale.id
70
- }), /*#__PURE__*/React.createElement(Header, null), size(detail) ? /*#__PURE__*/React.createElement(Detail, detailProps) : null, size(features) ? /*#__PURE__*/React.createElement(Features, featuresProps) : null, size(cases) ? /*#__PURE__*/React.createElement(Cases, casesProps) : null, size(companies) ? /*#__PURE__*/React.createElement(Companies, {
71
+ }), /*#__PURE__*/React.createElement(Header, null), size(detail) ? /*#__PURE__*/React.createElement(Detail, detailProps) : null, size(featuresProps.features) ? /*#__PURE__*/React.createElement(Features, featuresProps) : null, size(cases) ? /*#__PURE__*/React.createElement(Cases, casesProps) : null, size(companies) ? /*#__PURE__*/React.createElement(Companies, {
71
72
  title: /*#__PURE__*/React.createElement(FormattedMessage, {
72
73
  id: isAntVSite ? "2000+ 公司正在使用" : "感谢信赖"
73
74
  }),
@@ -75,6 +75,9 @@
75
75
  line-height: 47px;
76
76
  border: 1px solid #a3b1bf;
77
77
  transition: all 0.3s;
78
+ display: flex;
79
+ justify-content: center;
80
+ align-items: center;
78
81
 
79
82
  &:hover {
80
83
  border: 1px solid #ced4d9;
@@ -86,7 +89,6 @@
86
89
  }
87
90
 
88
91
  .controlButtonIcon {
89
- width: 100%;
90
92
  color: #a3b1bf;
91
93
  transition: all 0.3s;
92
94
  }
@@ -18,9 +18,6 @@ export var Companies = function Companies(_ref) {
18
18
  key: "title",
19
19
  className: styles.title
20
20
  }, title), /*#__PURE__*/React.createElement("div", {
21
- key: "slicer",
22
- className: styles.slicer
23
- }), /*#__PURE__*/React.createElement("div", {
24
21
  key: "companies-container",
25
22
  className: styles.companiesContainer
26
23
  }, /*#__PURE__*/React.createElement(Row, {
@@ -23,22 +23,14 @@
23
23
  margin: 118px 0 0 0;
24
24
  position: relative;
25
25
  height: min-content;
26
+ text-align: center;
26
27
  color: rgba(0, 0, 0, 1);
27
28
  }
28
29
 
29
- .slicer {
30
- width: 32px;
31
- height: 6px;
32
- background: linear-gradient(145deg,
33
- fade(@primary-color, 70%),
34
- shade(@primary-color, 20%));
35
- margin-top: 64px;
36
- }
37
-
38
30
  .companiesContainer {
39
31
  position: relative;
40
32
  margin: auto;
41
- margin-top: 52px;
33
+ margin-top: 48px;
42
34
 
43
35
  .company {
44
36
  margin-bottom: 20px;
@@ -57,12 +49,6 @@
57
49
  margin: 98px 0 0 0;
58
50
  }
59
51
 
60
- .slicer {
61
- width: 25px;
62
- height: 6px;
63
- margin: 44px 0 44px 0;
64
- }
65
-
66
52
  .content {
67
53
  margin-left: 4.27%;
68
54
  width: 91.64%;
@@ -14,11 +14,7 @@ export var News = function News(_ref) {
14
14
  var lang = useLocale().id;
15
15
  var children = /*#__PURE__*/React.createElement("div", {
16
16
  className: styles.container
17
- }, /*#__PURE__*/React.createElement("img", {
18
- className: styles.number,
19
- src: numberImages[index],
20
- alt: index.toString()
21
- }), /*#__PURE__*/React.createElement("div", {
17
+ }, /*#__PURE__*/React.createElement("div", {
22
18
  className: styles.content
23
19
  }, /*#__PURE__*/React.createElement("p", {
24
20
  className: styles.description
@@ -1,34 +1,41 @@
1
1
  .news {
2
2
  width: 50%;
3
3
  margin-right: 2%;
4
+ background-color: #FFFFFF;
5
+ border: 1px solid #E5E8EF;
6
+ box-shadow: 0 8px 28px 0 rgba(0,0,0,0.05);
7
+ border-radius: 16px;
8
+ height: 100%;
4
9
 
5
10
  &:last-child {
6
11
  margin-right: 0;
7
12
  }
8
13
 
9
14
  .container {
10
- height: 44px;
11
- display: flex;
12
-
13
- .number {
14
- height: 100%;
15
- width: 44px;
16
- }
15
+ height: 100%;
16
+ color: #1D2129;
17
+ letter-spacing: 0;
17
18
 
18
19
  .content {
19
- padding-left: 20px;
20
- color: rgba(49, 70, 89, 1);
21
- text-align: left;
20
+ height: 100%;
21
+ padding: 0 20px;
22
+ display: flex;
23
+ align-items: center;
24
+ flex-direction: column;
25
+ justify-content: center;
22
26
 
23
27
  .description {
24
28
  top: 0;
25
- font-size: 1.14em;
26
29
  margin-bottom: 0;
27
30
  transition: all 0.3s;
31
+ font-family: PingFangSC;
32
+ font-weight: 500;
33
+ font-size: 20px;
34
+ text-align: center;
28
35
  }
29
36
 
30
37
  .date {
31
- color: rgba(216, 203, 249, 1);
38
+ color: #424E66;
32
39
  bottom: 0;
33
40
  font-size: 1em;
34
41
  margin-top: 4px;
@@ -38,7 +45,7 @@
38
45
  }
39
46
 
40
47
  &:hover .description {
41
- color: rgba(89, 126, 247, 1);
48
+ color: #691EFF;
42
49
  }
43
50
  }
44
51
 
@@ -68,26 +75,31 @@
68
75
  0% {
69
76
  opacity: 1;
70
77
  top: 0px;
78
+ z-index: 1;
71
79
  }
72
80
 
73
81
  33.3% {
74
82
  opacity: 1;
75
83
  top: 0px;
84
+ z-index: 1;
76
85
  }
77
86
 
78
87
  50% {
79
88
  opacity: 0;
80
89
  top: -30px;
90
+ z-index: 0;
81
91
  }
82
92
 
83
93
  83.3% {
84
94
  opacity: 0;
85
95
  top: 30px;
96
+ z-index: 0;
86
97
  }
87
98
 
88
99
  100% {
89
100
  opacity: 1;
90
101
  top: 0px;
102
+ z-index: 1;
91
103
  }
92
104
  }
93
105
 
@@ -96,25 +108,30 @@
96
108
  0% {
97
109
  opacity: 0;
98
110
  top: 30px;
111
+ z-index: 0;
99
112
  }
100
113
 
101
114
  33.3% {
102
115
  opacity: 0;
103
116
  top: 30px;
117
+ z-index: 0;
104
118
  }
105
119
 
106
120
  50% {
107
121
  opacity: 1;
108
122
  top: 0px;
123
+ z-index: 1;
109
124
  }
110
125
 
111
126
  83.3% {
112
127
  opacity: 1;
113
128
  top: 0px;
129
+ z-index: 1;
114
130
  }
115
131
 
116
132
  100% {
117
133
  opacity: 0;
118
134
  top: -30px;
135
+ z-index: 0;
119
136
  }
120
137
  }
@@ -192,12 +192,14 @@
192
192
  }
193
193
 
194
194
  .news {
195
- width: 80%;
195
+ width: 100%;
196
196
  display: flex;
197
197
  bottom: 40px;
198
198
  position: absolute;
199
199
  z-index: 3;
200
- margin-left: 4.5%;
200
+ height: 108px;
201
+ box-sizing: border-box;
202
+ padding: 0 4.5%;
201
203
  }
202
204
 
203
205
  .teaser {
@@ -284,11 +286,11 @@
284
286
  }
285
287
 
286
288
  .news {
287
- width: 100%;
289
+ width: 91%;
290
+ padding: 0;
288
291
  display: block;
289
- bottom: 20px;
290
- height: 44px;
291
- overflow: hidden;
292
+ bottom: 10x;
293
+ left: 4.5%;
292
294
  }
293
295
 
294
296
  .teaser {
@@ -328,10 +330,16 @@
328
330
  .text {
329
331
  .buttons {
330
332
  margin-top: 70%;
333
+ position: relative;
334
+ top: -170px;
331
335
 
332
336
  .githubWrapper {
333
337
  display: none;
334
338
  }
339
+
340
+ .buttonLink:nth-child(2) {
341
+ margin-right: 0;
342
+ }
335
343
  }
336
344
  }
337
345
 
@@ -354,20 +362,14 @@
354
362
  .wrapper {
355
363
  .text {
356
364
  height: 70%;
365
+ }
357
366
 
358
- .buttons {
359
- bottom: 10px;
360
- margin-top: unset;
361
- z-index: 1;
362
- position: absolute;
363
- left: 0;
364
- width: 100%;
365
- justify-content: center;
366
- }
367
+ .news {
368
+ height: 160px;
367
369
  }
368
370
 
369
371
  .teaser {
370
- top: 14%;
372
+ top: 10%;
371
373
  }
372
374
  }
373
375
  }
@@ -1,10 +1,15 @@
1
1
  .card {
2
2
  background-color: #fff;
3
- height: auto;
3
+ height: 100%;
4
+ padding: 36px 70px;
5
+ box-sizing: border-box;
4
6
 
5
7
  .content {
6
- padding-left: 15.9%;
7
- padding-right: 15.9%;
8
+ display: flex;
9
+ flex-direction: column;
10
+ align-items: center;
11
+ justify-content: space-between;
12
+ height: 100%;
8
13
 
9
14
  .icon {
10
15
  height: 60px;
@@ -13,8 +18,12 @@
13
18
  .title {
14
19
  font-size: 1.714em;
15
20
  color: #000;
16
- margin-top: 40px;
17
- margin-bottom: 0;
21
+ margin-top: 28px;
22
+ margin-bottom: 11px;
23
+ font-family: AlibabaPuHuiTiM;
24
+ color: #1D2129;
25
+ text-align: center;
26
+ line-height: 32px;
18
27
  }
19
28
 
20
29
  .description {
@@ -23,13 +32,13 @@
23
32
  color: rgba(105, 123, 140, 1);
24
33
  font-size: 1em;
25
34
  line-height: 1.8em;
26
- margin-top: 24px;
35
+ margin-top: 11px;
27
36
  margin-bottom: 0;
28
37
  }
29
38
  }
30
39
  }
31
40
 
32
- @media (max-width: 768px) {
41
+ @media (max-width: 900px) {
33
42
  .cards {
34
43
  .cardWrapper {
35
44
  .card {
@@ -22,69 +22,18 @@ export var Features = function Features(_ref) {
22
22
  });
23
23
  return children;
24
24
  };
25
-
26
- // for small screen
27
- var getDots = function getDots() {
28
- var dots = [];
29
- var length = features.length;
30
- var startTop = 45;
31
- var cardHeight = 350;
32
- var startLeftPercent = 0.028;
33
- var rows = length + 1;
34
- for (var i = 0; i < rows; i += 1) {
35
- var yOffset = 1;
36
- var top = "".concat(startTop + cardHeight * i - yOffset, "px");
37
- var leftColLeft = "".concat(startLeftPercent * 100, "%");
38
- var rigthColLeft = "".concat((startLeftPercent + 0.892) * 100, "%");
39
- dots.push( /*#__PURE__*/React.createElement("div", {
40
- key: "".concat(i, "-0"),
41
- className: styles.dot,
42
- style: {
43
- marginLeft: leftColLeft,
44
- marginTop: top
45
- }
46
- }));
47
- dots.push( /*#__PURE__*/React.createElement("div", {
48
- key: "".concat(i, "-1"),
49
- className: styles.dot,
50
- style: {
51
- marginLeft: rigthColLeft,
52
- marginTop: top
53
- }
54
- }));
55
- }
56
- return dots;
57
- };
58
25
  return /*#__PURE__*/React.createElement("div", {
59
26
  id: id,
60
27
  className: cx(styles.wrapper, className),
61
28
  style: style
62
- }, title ? /*#__PURE__*/React.createElement("div", {
63
- className: cx(styles.lefttopWithTitle, styles.lefttop)
64
- }) : /*#__PURE__*/React.createElement("div", {
65
- className: cx(styles.lefttopWithoutTitle, styles.lefttop)
66
- }), /*#__PURE__*/React.createElement("div", {
67
- className: title ? styles.rightbottom : cx(styles.rightbottomWithoutTitle, styles.rightbottom)
68
29
  }, /*#__PURE__*/React.createElement("div", {
69
- className: cx(styles.slicerbar, styles.slicerbarv, styles.slicerbarv1)
70
- }), /*#__PURE__*/React.createElement("div", {
71
- className: cx(styles.slicerbar, styles.slicerbarv, styles.slicerbarv2)
72
- }), /*#__PURE__*/React.createElement("div", {
73
- className: cx(styles.slicerbar, styles.slicerbarh, styles.slicerbarh1)
74
- }), /*#__PURE__*/React.createElement("div", {
75
- className: cx(styles.slicerbar, styles.slicerbarh, styles.slicerbarh2)
76
- }), /*#__PURE__*/React.createElement("div", {
77
- className: cx(styles.slicerbar, styles.slicerbarh, styles.slicerbarh3)
78
- }), /*#__PURE__*/React.createElement("div", {
79
- className: cx(styles.slicerbar, styles.slicerbarh, styles.slicerbarh4)
80
- }), getDots()), /*#__PURE__*/React.createElement("div", {
81
30
  className: styles.content
82
31
  }, /*#__PURE__*/React.createElement("div", {
83
32
  key: "content"
84
33
  }, /*#__PURE__*/React.createElement("p", {
85
34
  key: "title",
86
35
  className: styles.title
87
- }, title ? title : ''), /*#__PURE__*/React.createElement("div", {
36
+ }, title ? ic(title) : ''), /*#__PURE__*/React.createElement("div", {
88
37
  key: "block",
89
38
  className: styles.cardsContainer
90
39
  }, /*#__PURE__*/React.createElement(Row, {
@@ -5,8 +5,9 @@
5
5
  margin: auto;
6
6
  position: relative;
7
7
  flex-direction: column;
8
- padding: 0;
9
- background: rgb(240, 245, 250);
8
+ padding-top: 120px;
9
+ top: -90px;
10
+ background: #fff;
10
11
  height: auto;
11
12
  overflow-x: hidden;
12
13
 
@@ -14,65 +15,24 @@
14
15
  width: 95.8%;
15
16
  height: 100%;
16
17
  margin-left: 4.2%;
17
- margin-bottom: 5%;
18
18
  position: relative;
19
19
  .container1440;
20
20
  }
21
21
 
22
22
  .title {
23
- font-size: 2.8em;
24
- padding-left: 4.06%;
25
23
  font-weight: 500;
26
24
  margin: 17px 0 0 0;
27
25
  position: relative;
26
+ font-family: AlibabaPuHuiTiB;
27
+ font-size: 40px;
28
+ text-align: center;
29
+ color: #1D2129;
28
30
  height: min-content;
29
- color: #fff;
30
- }
31
-
32
- .slicerbarv {
33
- display: none;
34
- }
35
-
36
- .slicerbarv2 {
37
- display: none;
38
- }
39
-
40
- .lefttop {
41
- background: linear-gradient(130deg,
42
- fade(@primary-color, 70%),
43
- shade(@primary-color, 20%));
44
- width: 100%;
45
- top: 0;
46
- position: absolute;
47
- }
48
-
49
- .lefttopWithTitle {
50
- height: 60%;
51
- }
52
-
53
- .lefttopWithoutTitle {
54
- height: 75%;
55
- }
56
-
57
- .rightbottom {
58
- position: absolute;
59
- width: 95.83%;
60
- left: 4.17%;
61
- top: 88px;
62
- background: #fff;
63
- height: 65%;
64
- box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1);
65
- }
66
-
67
- .rightbottomWithoutTitle {
68
- top: 48px;
69
- height: 75%;
70
31
  }
71
32
 
72
33
  .cardsContainer {
73
34
  width: 100%;
74
35
  height: 65%;
75
- margin-top: 48px;
76
36
  position: relative;
77
37
 
78
38
  .cards {
@@ -81,120 +41,54 @@
81
41
  position: relative;
82
42
  width: -webkit-fill-available;
83
43
  flex-wrap: wrap;
84
- margin-left: 4.06%;
44
+ box-sizing: border-box;
45
+ padding: 0 4.5%;
85
46
 
86
47
  .cardWrapper {
87
- margin: 68px 0 93px 0;
88
- border-right: 1px solid rgba(0, 0, 0, 0.1);
48
+ margin: 48px 0 30px 0;
49
+ background-color: #FFFFFF;
50
+ border: 1px solid #E5E8EF;
51
+ box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.03);
52
+ border-radius: 16px;
53
+ overflow: hidden;
54
+ margin-right: 29px;
55
+ flex: 1;
89
56
 
90
57
  &:last-child {
91
- border-right: 0px;
58
+ margin-right: 0;
92
59
  }
93
60
  }
94
61
  }
95
62
  }
96
63
  }
97
64
 
98
- .dot {
99
- position: absolute;
100
- width: 3px;
101
- height: 3px;
102
- border-radius: 50%;
103
- background: #d8d8d8;
104
- display: none;
105
- }
106
-
107
- @media (max-width: 768px) {
65
+ @media (max-width: 900px) {
108
66
  .wrapper {
109
67
  width: 100%;
110
68
 
111
- .lefttop {
112
- left: 0px;
113
- height: 100%;
114
- width: 100%;
115
- }
116
-
117
- .rightbottom {
118
- height: 79.5%;
119
- margin-top: 48px;
120
-
121
- .slicerbarv {
122
- position: absolute;
123
- background-color: #f2f4f5;
124
- width: 1px;
125
- height: 100%;
126
- margin-left: 3%;
127
- display: block;
128
- z-index: 1;
129
- }
130
-
131
- .slicerbarv2 {
132
- margin-left: 92.2%; // 1 - (0.96 * 0.04 + 0.04)
133
- }
134
-
135
- .slicerbarh {
136
- position: absolute;
137
- background-color: #f2f4f5;
138
- width: 100%;
139
- height: 1px;
140
- display: block;
141
- margin-top: 45px;
142
- }
143
-
144
- .slicerbarh2 {
145
- margin-top: 395px;
146
- }
147
-
148
- .slicerbarh3 {
149
- margin-top: 745px;
150
- }
151
-
152
- .slicerbarh4 {
153
- margin-top: 1095px;
154
- }
155
- }
156
-
157
- .rightbottomWithoutTitle {
158
- top: 48px;
159
- height: 86.5%;
160
- }
161
-
162
- .lefttopWithTitle {
163
- height: 95.73%;
164
- }
165
-
166
- .lefttopWithoutTitle {
167
- height: 95.73%;
168
- }
169
-
170
69
  .content {
70
+ width: 91.46%;
71
+
171
72
  .title {
172
73
  font-size: 2.143rem;
173
- margin: 80px 0 60px 0;
174
74
  }
175
75
 
176
76
  .cardsContainer {
177
- margin-bottom: 70px;
178
-
179
77
  .cards {
180
- margin-top: 60px;
181
- margin-left: 3.34%;
182
- padding-top: 45px;
183
- padding-bottom: 45px;
78
+ margin-top: 48px;
184
79
 
185
80
  .cardWrapper {
186
- margin: 68px 0 68px 0;
81
+ flex: none;
82
+ margin: 0 0 28px 0;
187
83
  width: 100%;
188
- height: 216px;
189
- border-right: 0px;
84
+ max-width: 100%;
85
+
86
+ &:last-child {
87
+ margin: 0 0 30px 0;
88
+ }
190
89
  }
191
90
  }
192
91
  }
193
92
  }
194
93
  }
195
-
196
- .dot {
197
- display: block;
198
- z-index: 2;
199
- }
200
- }
94
+ }
@@ -46,8 +46,8 @@ export var Footer = function Footer(props) {
46
46
  url: 'https://ant.design',
47
47
  openExternal: true
48
48
  }, {
49
- title: 'Ant Design Mobile',
50
- url: 'https://mobile.ant.design',
49
+ title: 'Galacea Effects',
50
+ url: 'https://galacean.antgroup.com/effects/',
51
51
  openExternal: true
52
52
  }, {
53
53
  title: 'Umi',
@@ -70,11 +70,6 @@ export var Footer = function Footer(props) {
70
70
  }),
71
71
  url: 'https://github.com/alibaba/hooks',
72
72
  openExternal: true
73
- }, {
74
- title: /*#__PURE__*/React.createElement(FormattedMessage, {
75
- id: "\u56FD\u5185\u955C\u50CF"
76
- }),
77
- url: 'https://antv.antgroup.com/'
78
73
  }]
79
74
  };
80
75
  var col2 = {
@@ -60,6 +60,8 @@
60
60
  }
61
61
 
62
62
  &.isAntVHome {
63
+ margin-bottom: -@nav-height;
64
+
63
65
  .container {
64
66
  max-width: 100%;
65
67
  padding: 0 20px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antv/dumi-theme-antv",
3
- "version": "0.4.3",
3
+ "version": "0.4.5",
4
4
  "description": "AntV website theme based on dumi2.",
5
5
  "types": "dist/types.d.ts",
6
6
  "scripts": {