@fonixtree/magic-design 0.0.126 → 0.0.150
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.
- package/es/composite-comp/bol/components/Carousel/defaultJSON.js +5 -4
- package/es/composite-comp/bol/components/Carousel/mobile/index.js +18 -17
- package/es/composite-comp/bol/components/Carousel/mobile/index.less +1 -1
- package/es/composite-comp/bol/components/Carousel/pc/index.js +35 -34
- package/es/composite-comp/bol/components/Carousel/pc/index.less +4 -4
- package/es/composite-comp/bol/components/ImageGallery/mobile/index.js +0 -5
- package/es/composite-comp/bol/components/ImageGallery/pc/index.js +0 -6
- package/es/composite-comp/bol/components/ImageText/mobile/index.less +2 -1
- package/es/composite-comp/bol/components/Tag/defaultJSON.js +15 -2
- package/es/composite-comp/bol/components/Tag/index.js +1 -1
- package/es/composite-comp/bol/second-config-panels/CarouselSecondConfig/index.js +1 -0
- package/es/composite-comp/dito/components/MobileNavigation/mobile/index.less +1 -1
- package/es/composite-comp/dito/components/PcNavigation/pc/index.less +1 -1
- package/es/composite-comp/dito/components/Recommend/mobile/index.js +1 -1
- package/es/composite-comp/dito/components/Recommend/pc/index.js +16 -41
- package/es/composite-comp/dito/components/Recommend/pc/index.less +2 -2
- package/lib/composite-comp/bol/components/Carousel/defaultJSON.js +5 -4
- package/lib/composite-comp/bol/components/Carousel/mobile/index.js +18 -17
- package/lib/composite-comp/bol/components/Carousel/mobile/index.less +1 -1
- package/lib/composite-comp/bol/components/Carousel/pc/index.js +35 -34
- package/lib/composite-comp/bol/components/Carousel/pc/index.less +4 -4
- package/lib/composite-comp/bol/components/ImageGallery/mobile/index.js +0 -5
- package/lib/composite-comp/bol/components/ImageGallery/pc/index.js +0 -6
- package/lib/composite-comp/bol/components/ImageText/mobile/index.less +2 -1
- package/lib/composite-comp/bol/components/Tag/defaultJSON.js +15 -2
- package/lib/composite-comp/bol/components/Tag/index.js +1 -1
- package/lib/composite-comp/bol/second-config-panels/CarouselSecondConfig/index.js +1 -0
- package/lib/composite-comp/dito/components/MobileNavigation/mobile/index.less +1 -1
- package/lib/composite-comp/dito/components/PcNavigation/pc/index.less +1 -1
- package/lib/composite-comp/dito/components/Recommend/mobile/index.js +1 -1
- package/lib/composite-comp/dito/components/Recommend/pc/index.js +16 -41
- package/lib/composite-comp/dito/components/Recommend/pc/index.less +2 -2
- package/package.json +2 -1
|
@@ -44,8 +44,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
|
|
|
44
44
|
fontFamily: 'Open Sans',
|
|
45
45
|
fontWeight: 600,
|
|
46
46
|
fontSize: 16,
|
|
47
|
+
pcFontSize: 42,
|
|
47
48
|
color: '#232F46',
|
|
48
|
-
// width: 200,
|
|
49
49
|
textAlign: 'center'
|
|
50
50
|
},
|
|
51
51
|
underline: {
|
|
@@ -67,8 +67,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
|
|
|
67
67
|
fontFamily: 'Open Sans',
|
|
68
68
|
fontWeight: 400,
|
|
69
69
|
fontSize: 14,
|
|
70
|
+
pcFontSize: 28,
|
|
70
71
|
color: '##232F46',
|
|
71
|
-
// width: 230,
|
|
72
72
|
textAlign: 'center'
|
|
73
73
|
},
|
|
74
74
|
underline: {},
|
|
@@ -107,8 +107,9 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
|
|
|
107
107
|
buttonText: {
|
|
108
108
|
sizeType: 'Customize font styles',
|
|
109
109
|
fontFamily: 'Open Sans',
|
|
110
|
-
fontWeight:
|
|
111
|
-
fontSize:
|
|
110
|
+
fontWeight: 400,
|
|
111
|
+
fontSize: 13,
|
|
112
|
+
pcFontSize: 16,
|
|
112
113
|
fontStyle: 'normal',
|
|
113
114
|
color: '#8493AF'
|
|
114
115
|
},
|
|
@@ -69,22 +69,23 @@ var __assign = void 0 && (void 0).__assign || function () {
|
|
|
69
69
|
return __assign.apply(this, arguments);
|
|
70
70
|
};
|
|
71
71
|
|
|
72
|
-
var MOBILE_IMG_SIZE =
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
},
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
},
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
},
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
},
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
}
|
|
72
|
+
var MOBILE_IMG_SIZE = {
|
|
73
|
+
1: {
|
|
74
|
+
maxH: 282
|
|
75
|
+
},
|
|
76
|
+
2: {
|
|
77
|
+
maxH: 137
|
|
78
|
+
},
|
|
79
|
+
3: {
|
|
80
|
+
maxH: 87
|
|
81
|
+
},
|
|
82
|
+
4: {
|
|
83
|
+
maxH: 66
|
|
84
|
+
},
|
|
85
|
+
5: {
|
|
86
|
+
maxH: 50
|
|
87
|
+
}
|
|
88
|
+
};
|
|
88
89
|
|
|
89
90
|
var CarouselMobile =
|
|
90
91
|
/** @class */
|
|
@@ -226,7 +227,7 @@ function (_super) {
|
|
|
226
227
|
className: "img"
|
|
227
228
|
}, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
|
|
228
229
|
data: item.image,
|
|
229
|
-
maxHeight: MOBILE_IMG_SIZE[colNum
|
|
230
|
+
maxHeight: MOBILE_IMG_SIZE[colNum].maxH
|
|
230
231
|
})), showText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && /*#__PURE__*/_react["default"].createElement("div", {
|
|
231
232
|
className: "title"
|
|
232
233
|
}, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
|
|
@@ -55,37 +55,38 @@ var __extends = void 0 && (void 0).__extends || function () {
|
|
|
55
55
|
};
|
|
56
56
|
}();
|
|
57
57
|
|
|
58
|
-
var PC_IMG_SIZE =
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
},
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
},
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
},
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
},
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
},
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
}
|
|
58
|
+
var PC_IMG_SIZE = {
|
|
59
|
+
1: {
|
|
60
|
+
minW: 150,
|
|
61
|
+
minH: 150,
|
|
62
|
+
maxH: 680
|
|
63
|
+
},
|
|
64
|
+
2: {
|
|
65
|
+
minW: 150,
|
|
66
|
+
minH: 150,
|
|
67
|
+
maxH: 524
|
|
68
|
+
},
|
|
69
|
+
3: {
|
|
70
|
+
minW: 100,
|
|
71
|
+
minH: 100,
|
|
72
|
+
maxH: 341
|
|
73
|
+
},
|
|
74
|
+
4: {
|
|
75
|
+
minW: 100,
|
|
76
|
+
minH: 100,
|
|
77
|
+
maxH: 251
|
|
78
|
+
},
|
|
79
|
+
5: {
|
|
80
|
+
minW: 100,
|
|
81
|
+
minH: 100,
|
|
82
|
+
maxH: 195
|
|
83
|
+
},
|
|
84
|
+
6: {
|
|
85
|
+
minW: 100,
|
|
86
|
+
minH: 100,
|
|
87
|
+
maxH: 168
|
|
88
|
+
}
|
|
89
|
+
};
|
|
89
90
|
|
|
90
91
|
var CarouselPc =
|
|
91
92
|
/** @class */
|
|
@@ -232,9 +233,9 @@ function (_super) {
|
|
|
232
233
|
className: "img"
|
|
233
234
|
}, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
|
|
234
235
|
data: item.image,
|
|
235
|
-
maxHeight: PC_IMG_SIZE[colNum
|
|
236
|
-
minHeight: PC_IMG_SIZE[colNum
|
|
237
|
-
minWidth: PC_IMG_SIZE[colNum
|
|
236
|
+
maxHeight: PC_IMG_SIZE[colNum].maxH,
|
|
237
|
+
minHeight: PC_IMG_SIZE[colNum].minH,
|
|
238
|
+
minWidth: PC_IMG_SIZE[colNum].minW
|
|
238
239
|
})), showText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && !((0, _coreUtil.isPc)() && item.title.pcText === '') && /*#__PURE__*/_react["default"].createElement("div", {
|
|
239
240
|
className: "title"
|
|
240
241
|
}, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
|
|
@@ -56,18 +56,18 @@
|
|
|
56
56
|
.title {
|
|
57
57
|
display: flex;
|
|
58
58
|
justify-content: center;
|
|
59
|
-
margin-top:
|
|
59
|
+
margin-top: 24px;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
.text {
|
|
63
63
|
display: flex;
|
|
64
64
|
justify-content: center;
|
|
65
|
-
margin-top:
|
|
65
|
+
margin-top: 6px;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
.tags {
|
|
69
|
-
margin-top:
|
|
70
|
-
margin-bottom:
|
|
69
|
+
margin-top: 12px;
|
|
70
|
+
margin-bottom: 20px;
|
|
71
71
|
display: flex;
|
|
72
72
|
flex-direction: row;
|
|
73
73
|
align-items: center;
|
|
@@ -57,27 +57,22 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
|
|
|
57
57
|
|
|
58
58
|
var MOBILE_IMG_SIZE = {
|
|
59
59
|
1: {
|
|
60
|
-
maxW: 343,
|
|
61
60
|
maxH: 258,
|
|
62
61
|
gap: 12
|
|
63
62
|
},
|
|
64
63
|
2: {
|
|
65
|
-
maxW: 165,
|
|
66
64
|
maxH: 124,
|
|
67
65
|
gap: 12
|
|
68
66
|
},
|
|
69
67
|
3: {
|
|
70
|
-
maxW: 106,
|
|
71
68
|
maxH: 80,
|
|
72
69
|
gap: 12
|
|
73
70
|
},
|
|
74
71
|
4: {
|
|
75
|
-
maxW: 77,
|
|
76
72
|
maxH: 56,
|
|
77
73
|
gap: 12
|
|
78
74
|
},
|
|
79
75
|
5: {
|
|
80
|
-
maxW: 62,
|
|
81
76
|
maxH: 45,
|
|
82
77
|
gap: 8
|
|
83
78
|
}
|
|
@@ -58,7 +58,6 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
|
|
|
58
58
|
var PC_IMG_SIZE = {
|
|
59
59
|
1: {
|
|
60
60
|
minW: 150,
|
|
61
|
-
maxW: 1280,
|
|
62
61
|
minH: 150,
|
|
63
62
|
maxH: 960,
|
|
64
63
|
defW: 1072,
|
|
@@ -67,35 +66,30 @@ var PC_IMG_SIZE = {
|
|
|
67
66
|
},
|
|
68
67
|
2: {
|
|
69
68
|
minW: 150,
|
|
70
|
-
maxW: 628,
|
|
71
69
|
minH: 150,
|
|
72
70
|
maxH: 471,
|
|
73
71
|
gap: 24
|
|
74
72
|
},
|
|
75
73
|
3: {
|
|
76
74
|
minW: 100,
|
|
77
|
-
maxW: 410,
|
|
78
75
|
minH: 100,
|
|
79
76
|
maxH: 308,
|
|
80
77
|
gap: 24
|
|
81
78
|
},
|
|
82
79
|
4: {
|
|
83
80
|
minW: 100,
|
|
84
|
-
maxW: 302,
|
|
85
81
|
minH: 100,
|
|
86
82
|
maxH: 227,
|
|
87
83
|
gap: 24
|
|
88
84
|
},
|
|
89
85
|
5: {
|
|
90
86
|
minW: 100,
|
|
91
|
-
maxW: 236,
|
|
92
87
|
minH: 100,
|
|
93
88
|
maxH: 177,
|
|
94
89
|
gap: 24
|
|
95
90
|
},
|
|
96
91
|
6: {
|
|
97
92
|
minW: 100,
|
|
98
|
-
maxW: 193,
|
|
99
93
|
minH: 100,
|
|
100
94
|
maxH: 145,
|
|
101
95
|
gap: 24
|
|
@@ -28,8 +28,7 @@ var tagGroupSourceJSON = function tagGroupSourceJSON() {
|
|
|
28
28
|
fontWeight: 600,
|
|
29
29
|
fontSize: 12,
|
|
30
30
|
fontStyle: 'normal',
|
|
31
|
-
color: '#8493AF'
|
|
32
|
-
padding: '2px 8px'
|
|
31
|
+
color: '#8493AF'
|
|
33
32
|
},
|
|
34
33
|
buttonBorder: {
|
|
35
34
|
open: true,
|
|
@@ -40,6 +39,20 @@ var tagGroupSourceJSON = function tagGroupSourceJSON() {
|
|
|
40
39
|
iconUrl: '',
|
|
41
40
|
layout: 'right'
|
|
42
41
|
},
|
|
42
|
+
spacing: {
|
|
43
|
+
pc: {
|
|
44
|
+
paddingTop: 2,
|
|
45
|
+
paddingBottom: 2,
|
|
46
|
+
paddingLeft: 8,
|
|
47
|
+
paddingRight: 8
|
|
48
|
+
},
|
|
49
|
+
mobile: {
|
|
50
|
+
paddingTop: 2,
|
|
51
|
+
paddingBottom: 2,
|
|
52
|
+
paddingLeft: 8,
|
|
53
|
+
paddingRight: 8
|
|
54
|
+
}
|
|
55
|
+
},
|
|
43
56
|
text: 'Button Tag',
|
|
44
57
|
hover: null
|
|
45
58
|
}
|
|
@@ -82,7 +82,7 @@ function (_super) {
|
|
|
82
82
|
}, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
|
|
83
83
|
data: nodeData.content.image
|
|
84
84
|
})), nodeData.groupSource && nodeData.groupSource.map(function (m) {
|
|
85
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
85
|
+
return m.button.open && /*#__PURE__*/_react["default"].createElement("div", {
|
|
86
86
|
className: "first-button"
|
|
87
87
|
}, /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
|
|
88
88
|
data: m.button
|
|
@@ -120,6 +120,7 @@ function (_super) {
|
|
|
120
120
|
|
|
121
121
|
var getConfig = function getConfig() {
|
|
122
122
|
return /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
|
|
123
|
+
headerSize: "middle",
|
|
123
124
|
onRefresh: function onRefresh() {
|
|
124
125
|
return (0, _coreUtil.renderPreview)();
|
|
125
126
|
},
|
|
@@ -548,7 +548,7 @@ function (_super) {
|
|
|
548
548
|
var curContent = JSON.stringify(panelProps.content);
|
|
549
549
|
var curSpacing = JSON.stringify(panelProps.spacing);
|
|
550
550
|
|
|
551
|
-
if (curSpacing !== this.preSpacing) {
|
|
551
|
+
if (curLayout !== this.preLayout || curSpacing !== this.preSpacing) {
|
|
552
552
|
this.listenWidth();
|
|
553
553
|
}
|
|
554
554
|
|
|
@@ -232,29 +232,6 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
|
|
|
232
232
|
return r;
|
|
233
233
|
};
|
|
234
234
|
|
|
235
|
-
var LAYOUT_IMAGE_SIZE = {
|
|
236
|
-
layout1: {
|
|
237
|
-
w: '100%',
|
|
238
|
-
h: ''
|
|
239
|
-
},
|
|
240
|
-
layout2_col6: {
|
|
241
|
-
w: 160,
|
|
242
|
-
h: 160
|
|
243
|
-
},
|
|
244
|
-
layout2_col5: {
|
|
245
|
-
w: 200,
|
|
246
|
-
h: 200
|
|
247
|
-
},
|
|
248
|
-
layout3_col6: {
|
|
249
|
-
w: 160,
|
|
250
|
-
h: 160
|
|
251
|
-
},
|
|
252
|
-
layout3_col5: {
|
|
253
|
-
w: 200,
|
|
254
|
-
h: 200
|
|
255
|
-
}
|
|
256
|
-
};
|
|
257
|
-
|
|
258
235
|
var RecommendMobile =
|
|
259
236
|
/** @class */
|
|
260
237
|
function (_super) {
|
|
@@ -284,7 +261,7 @@ function (_super) {
|
|
|
284
261
|
|
|
285
262
|
_this.listenWidth = function () {
|
|
286
263
|
setTimeout(function () {
|
|
287
|
-
var renderContainer = document.querySelector(".macyContainer_" + _this.props.panelProps.id);
|
|
264
|
+
var renderContainer = document.querySelector(".macyContainer_" + _this.props.panelProps.id) || document.querySelector(".scrollContainer_" + _this.props.panelProps.id);
|
|
288
265
|
if (renderContainer) _this.setState({
|
|
289
266
|
contentWidth: renderContainer.offsetWidth
|
|
290
267
|
});
|
|
@@ -461,7 +438,7 @@ function (_super) {
|
|
|
461
438
|
if (document.querySelector(".macyContainer_" + _this.props.panelProps.id)) {
|
|
462
439
|
_this.getMacy(".macyContainer_" + _this.props.panelProps.id, customize.pcRowNum);
|
|
463
440
|
}
|
|
464
|
-
});
|
|
441
|
+
}, 10);
|
|
465
442
|
};
|
|
466
443
|
|
|
467
444
|
_this.getMacy = function (container, columns) {
|
|
@@ -471,8 +448,8 @@ function (_super) {
|
|
|
471
448
|
waitForImages: false,
|
|
472
449
|
useOwnImageLoader: false,
|
|
473
450
|
margin: {
|
|
474
|
-
x:
|
|
475
|
-
y:
|
|
451
|
+
x: 24,
|
|
452
|
+
y: 24
|
|
476
453
|
},
|
|
477
454
|
columns: columns
|
|
478
455
|
});
|
|
@@ -618,11 +595,10 @@ function (_super) {
|
|
|
618
595
|
}, 0);
|
|
619
596
|
}
|
|
620
597
|
|
|
621
|
-
this.preLayout = curLayout;
|
|
622
598
|
var curContent = JSON.stringify(panelProps.content);
|
|
623
599
|
var curSpacing = JSON.stringify(panelProps.spacing);
|
|
624
600
|
|
|
625
|
-
if (curSpacing !== this.preSpacing) {
|
|
601
|
+
if (curLayout !== this.preLayout || curSpacing !== this.preSpacing) {
|
|
626
602
|
this.listenWidth();
|
|
627
603
|
}
|
|
628
604
|
|
|
@@ -630,6 +606,7 @@ function (_super) {
|
|
|
630
606
|
this.resetLayout();
|
|
631
607
|
}
|
|
632
608
|
|
|
609
|
+
this.preLayout = curLayout;
|
|
633
610
|
this.preContent = curContent;
|
|
634
611
|
this.preSpacing = curSpacing;
|
|
635
612
|
};
|
|
@@ -655,13 +632,11 @@ function (_super) {
|
|
|
655
632
|
return groupSource[tabIndex].seeAll;
|
|
656
633
|
}, '');
|
|
657
634
|
|
|
658
|
-
var
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
var
|
|
662
|
-
|
|
663
|
-
}, 140);
|
|
664
|
-
if (layout === 'layout1' && contentWidth) imgHeight = (contentWidth - 12 * (panelProps.customize.pcRowNum - 1)) / panelProps.customize.pcRowNum;
|
|
635
|
+
var imgSize = 140;
|
|
636
|
+
var otherWidth = layout === 'layout3' ? 100 : 0;
|
|
637
|
+
var colNumber = layout === 'layout1' ? panelProps.customize.pcRowNum : panelProps.customize.pcRowNum + 0.5;
|
|
638
|
+
var spaceNumber = layout === 'layout1' ? panelProps.customize.pcRowNum - 1 : panelProps.customize.pcRowNum;
|
|
639
|
+
if (contentWidth) imgSize = (contentWidth - 24 * spaceNumber - otherWidth) / colNumber;
|
|
665
640
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
666
641
|
className: "m-recommend-pc"
|
|
667
642
|
}, !hideTabs && /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -723,8 +698,8 @@ function (_super) {
|
|
|
723
698
|
key: item.productId,
|
|
724
699
|
data: item,
|
|
725
700
|
fixHeight: true,
|
|
726
|
-
imgHeight:
|
|
727
|
-
imgWidth:
|
|
701
|
+
imgHeight: imgSize,
|
|
702
|
+
imgWidth: "100%",
|
|
728
703
|
onItemClick: function onItemClick() {
|
|
729
704
|
return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId);
|
|
730
705
|
},
|
|
@@ -739,7 +714,7 @@ function (_super) {
|
|
|
739
714
|
})) : /*#__PURE__*/_react["default"].createElement("div", {
|
|
740
715
|
key: "scrollContainer",
|
|
741
716
|
ref: this.scrollRef,
|
|
742
|
-
className: (0, _classnames["default"])(
|
|
717
|
+
className: (0, _classnames["default"])("scrollContainer scrollContainer_" + panelProps.id, {
|
|
743
718
|
pl_100: layout === 'layout3'
|
|
744
719
|
})
|
|
745
720
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -751,8 +726,8 @@ function (_super) {
|
|
|
751
726
|
key: "scroll_" + item.productId,
|
|
752
727
|
data: item,
|
|
753
728
|
fixHeight: true,
|
|
754
|
-
imgHeight:
|
|
755
|
-
imgWidth:
|
|
729
|
+
imgHeight: imgSize,
|
|
730
|
+
imgWidth: imgSize,
|
|
756
731
|
onItemClick: function onItemClick() {
|
|
757
732
|
return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId);
|
|
758
733
|
},
|
|
@@ -44,8 +44,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
|
|
|
44
44
|
fontFamily: 'Open Sans',
|
|
45
45
|
fontWeight: 600,
|
|
46
46
|
fontSize: 16,
|
|
47
|
+
pcFontSize: 42,
|
|
47
48
|
color: '#232F46',
|
|
48
|
-
// width: 200,
|
|
49
49
|
textAlign: 'center'
|
|
50
50
|
},
|
|
51
51
|
underline: {
|
|
@@ -67,8 +67,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
|
|
|
67
67
|
fontFamily: 'Open Sans',
|
|
68
68
|
fontWeight: 400,
|
|
69
69
|
fontSize: 14,
|
|
70
|
+
pcFontSize: 28,
|
|
70
71
|
color: '##232F46',
|
|
71
|
-
// width: 230,
|
|
72
72
|
textAlign: 'center'
|
|
73
73
|
},
|
|
74
74
|
underline: {},
|
|
@@ -107,8 +107,9 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
|
|
|
107
107
|
buttonText: {
|
|
108
108
|
sizeType: 'Customize font styles',
|
|
109
109
|
fontFamily: 'Open Sans',
|
|
110
|
-
fontWeight:
|
|
111
|
-
fontSize:
|
|
110
|
+
fontWeight: 400,
|
|
111
|
+
fontSize: 13,
|
|
112
|
+
pcFontSize: 16,
|
|
112
113
|
fontStyle: 'normal',
|
|
113
114
|
color: '#8493AF'
|
|
114
115
|
},
|
|
@@ -69,22 +69,23 @@ var __assign = void 0 && (void 0).__assign || function () {
|
|
|
69
69
|
return __assign.apply(this, arguments);
|
|
70
70
|
};
|
|
71
71
|
|
|
72
|
-
var MOBILE_IMG_SIZE =
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
},
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
},
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
},
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
},
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
}
|
|
72
|
+
var MOBILE_IMG_SIZE = {
|
|
73
|
+
1: {
|
|
74
|
+
maxH: 282
|
|
75
|
+
},
|
|
76
|
+
2: {
|
|
77
|
+
maxH: 137
|
|
78
|
+
},
|
|
79
|
+
3: {
|
|
80
|
+
maxH: 87
|
|
81
|
+
},
|
|
82
|
+
4: {
|
|
83
|
+
maxH: 66
|
|
84
|
+
},
|
|
85
|
+
5: {
|
|
86
|
+
maxH: 50
|
|
87
|
+
}
|
|
88
|
+
};
|
|
88
89
|
|
|
89
90
|
var CarouselMobile =
|
|
90
91
|
/** @class */
|
|
@@ -226,7 +227,7 @@ function (_super) {
|
|
|
226
227
|
className: "img"
|
|
227
228
|
}, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
|
|
228
229
|
data: item.image,
|
|
229
|
-
maxHeight: MOBILE_IMG_SIZE[colNum
|
|
230
|
+
maxHeight: MOBILE_IMG_SIZE[colNum].maxH
|
|
230
231
|
})), showText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && /*#__PURE__*/_react["default"].createElement("div", {
|
|
231
232
|
className: "title"
|
|
232
233
|
}, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
|
|
@@ -55,37 +55,38 @@ var __extends = void 0 && (void 0).__extends || function () {
|
|
|
55
55
|
};
|
|
56
56
|
}();
|
|
57
57
|
|
|
58
|
-
var PC_IMG_SIZE =
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
},
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
},
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
},
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
},
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
},
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
}
|
|
58
|
+
var PC_IMG_SIZE = {
|
|
59
|
+
1: {
|
|
60
|
+
minW: 150,
|
|
61
|
+
minH: 150,
|
|
62
|
+
maxH: 680
|
|
63
|
+
},
|
|
64
|
+
2: {
|
|
65
|
+
minW: 150,
|
|
66
|
+
minH: 150,
|
|
67
|
+
maxH: 524
|
|
68
|
+
},
|
|
69
|
+
3: {
|
|
70
|
+
minW: 100,
|
|
71
|
+
minH: 100,
|
|
72
|
+
maxH: 341
|
|
73
|
+
},
|
|
74
|
+
4: {
|
|
75
|
+
minW: 100,
|
|
76
|
+
minH: 100,
|
|
77
|
+
maxH: 251
|
|
78
|
+
},
|
|
79
|
+
5: {
|
|
80
|
+
minW: 100,
|
|
81
|
+
minH: 100,
|
|
82
|
+
maxH: 195
|
|
83
|
+
},
|
|
84
|
+
6: {
|
|
85
|
+
minW: 100,
|
|
86
|
+
minH: 100,
|
|
87
|
+
maxH: 168
|
|
88
|
+
}
|
|
89
|
+
};
|
|
89
90
|
|
|
90
91
|
var CarouselPc =
|
|
91
92
|
/** @class */
|
|
@@ -232,9 +233,9 @@ function (_super) {
|
|
|
232
233
|
className: "img"
|
|
233
234
|
}, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
|
|
234
235
|
data: item.image,
|
|
235
|
-
maxHeight: PC_IMG_SIZE[colNum
|
|
236
|
-
minHeight: PC_IMG_SIZE[colNum
|
|
237
|
-
minWidth: PC_IMG_SIZE[colNum
|
|
236
|
+
maxHeight: PC_IMG_SIZE[colNum].maxH,
|
|
237
|
+
minHeight: PC_IMG_SIZE[colNum].minH,
|
|
238
|
+
minWidth: PC_IMG_SIZE[colNum].minW
|
|
238
239
|
})), showText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && !((0, _coreUtil.isPc)() && item.title.pcText === '') && /*#__PURE__*/_react["default"].createElement("div", {
|
|
239
240
|
className: "title"
|
|
240
241
|
}, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
|
|
@@ -56,18 +56,18 @@
|
|
|
56
56
|
.title {
|
|
57
57
|
display: flex;
|
|
58
58
|
justify-content: center;
|
|
59
|
-
margin-top:
|
|
59
|
+
margin-top: 24px;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
.text {
|
|
63
63
|
display: flex;
|
|
64
64
|
justify-content: center;
|
|
65
|
-
margin-top:
|
|
65
|
+
margin-top: 6px;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
.tags {
|
|
69
|
-
margin-top:
|
|
70
|
-
margin-bottom:
|
|
69
|
+
margin-top: 12px;
|
|
70
|
+
margin-bottom: 20px;
|
|
71
71
|
display: flex;
|
|
72
72
|
flex-direction: row;
|
|
73
73
|
align-items: center;
|
|
@@ -57,27 +57,22 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
|
|
|
57
57
|
|
|
58
58
|
var MOBILE_IMG_SIZE = {
|
|
59
59
|
1: {
|
|
60
|
-
maxW: 343,
|
|
61
60
|
maxH: 258,
|
|
62
61
|
gap: 12
|
|
63
62
|
},
|
|
64
63
|
2: {
|
|
65
|
-
maxW: 165,
|
|
66
64
|
maxH: 124,
|
|
67
65
|
gap: 12
|
|
68
66
|
},
|
|
69
67
|
3: {
|
|
70
|
-
maxW: 106,
|
|
71
68
|
maxH: 80,
|
|
72
69
|
gap: 12
|
|
73
70
|
},
|
|
74
71
|
4: {
|
|
75
|
-
maxW: 77,
|
|
76
72
|
maxH: 56,
|
|
77
73
|
gap: 12
|
|
78
74
|
},
|
|
79
75
|
5: {
|
|
80
|
-
maxW: 62,
|
|
81
76
|
maxH: 45,
|
|
82
77
|
gap: 8
|
|
83
78
|
}
|
|
@@ -58,7 +58,6 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
|
|
|
58
58
|
var PC_IMG_SIZE = {
|
|
59
59
|
1: {
|
|
60
60
|
minW: 150,
|
|
61
|
-
maxW: 1280,
|
|
62
61
|
minH: 150,
|
|
63
62
|
maxH: 960,
|
|
64
63
|
defW: 1072,
|
|
@@ -67,35 +66,30 @@ var PC_IMG_SIZE = {
|
|
|
67
66
|
},
|
|
68
67
|
2: {
|
|
69
68
|
minW: 150,
|
|
70
|
-
maxW: 628,
|
|
71
69
|
minH: 150,
|
|
72
70
|
maxH: 471,
|
|
73
71
|
gap: 24
|
|
74
72
|
},
|
|
75
73
|
3: {
|
|
76
74
|
minW: 100,
|
|
77
|
-
maxW: 410,
|
|
78
75
|
minH: 100,
|
|
79
76
|
maxH: 308,
|
|
80
77
|
gap: 24
|
|
81
78
|
},
|
|
82
79
|
4: {
|
|
83
80
|
minW: 100,
|
|
84
|
-
maxW: 302,
|
|
85
81
|
minH: 100,
|
|
86
82
|
maxH: 227,
|
|
87
83
|
gap: 24
|
|
88
84
|
},
|
|
89
85
|
5: {
|
|
90
86
|
minW: 100,
|
|
91
|
-
maxW: 236,
|
|
92
87
|
minH: 100,
|
|
93
88
|
maxH: 177,
|
|
94
89
|
gap: 24
|
|
95
90
|
},
|
|
96
91
|
6: {
|
|
97
92
|
minW: 100,
|
|
98
|
-
maxW: 193,
|
|
99
93
|
minH: 100,
|
|
100
94
|
maxH: 145,
|
|
101
95
|
gap: 24
|
|
@@ -28,8 +28,7 @@ var tagGroupSourceJSON = function tagGroupSourceJSON() {
|
|
|
28
28
|
fontWeight: 600,
|
|
29
29
|
fontSize: 12,
|
|
30
30
|
fontStyle: 'normal',
|
|
31
|
-
color: '#8493AF'
|
|
32
|
-
padding: '2px 8px'
|
|
31
|
+
color: '#8493AF'
|
|
33
32
|
},
|
|
34
33
|
buttonBorder: {
|
|
35
34
|
open: true,
|
|
@@ -40,6 +39,20 @@ var tagGroupSourceJSON = function tagGroupSourceJSON() {
|
|
|
40
39
|
iconUrl: '',
|
|
41
40
|
layout: 'right'
|
|
42
41
|
},
|
|
42
|
+
spacing: {
|
|
43
|
+
pc: {
|
|
44
|
+
paddingTop: 2,
|
|
45
|
+
paddingBottom: 2,
|
|
46
|
+
paddingLeft: 8,
|
|
47
|
+
paddingRight: 8
|
|
48
|
+
},
|
|
49
|
+
mobile: {
|
|
50
|
+
paddingTop: 2,
|
|
51
|
+
paddingBottom: 2,
|
|
52
|
+
paddingLeft: 8,
|
|
53
|
+
paddingRight: 8
|
|
54
|
+
}
|
|
55
|
+
},
|
|
43
56
|
text: 'Button Tag',
|
|
44
57
|
hover: null
|
|
45
58
|
}
|
|
@@ -82,7 +82,7 @@ function (_super) {
|
|
|
82
82
|
}, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
|
|
83
83
|
data: nodeData.content.image
|
|
84
84
|
})), nodeData.groupSource && nodeData.groupSource.map(function (m) {
|
|
85
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
85
|
+
return m.button.open && /*#__PURE__*/_react["default"].createElement("div", {
|
|
86
86
|
className: "first-button"
|
|
87
87
|
}, /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
|
|
88
88
|
data: m.button
|
|
@@ -120,6 +120,7 @@ function (_super) {
|
|
|
120
120
|
|
|
121
121
|
var getConfig = function getConfig() {
|
|
122
122
|
return /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
|
|
123
|
+
headerSize: "middle",
|
|
123
124
|
onRefresh: function onRefresh() {
|
|
124
125
|
return (0, _coreUtil.renderPreview)();
|
|
125
126
|
},
|
|
@@ -548,7 +548,7 @@ function (_super) {
|
|
|
548
548
|
var curContent = JSON.stringify(panelProps.content);
|
|
549
549
|
var curSpacing = JSON.stringify(panelProps.spacing);
|
|
550
550
|
|
|
551
|
-
if (curSpacing !== this.preSpacing) {
|
|
551
|
+
if (curLayout !== this.preLayout || curSpacing !== this.preSpacing) {
|
|
552
552
|
this.listenWidth();
|
|
553
553
|
}
|
|
554
554
|
|
|
@@ -232,29 +232,6 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
|
|
|
232
232
|
return r;
|
|
233
233
|
};
|
|
234
234
|
|
|
235
|
-
var LAYOUT_IMAGE_SIZE = {
|
|
236
|
-
layout1: {
|
|
237
|
-
w: '100%',
|
|
238
|
-
h: ''
|
|
239
|
-
},
|
|
240
|
-
layout2_col6: {
|
|
241
|
-
w: 160,
|
|
242
|
-
h: 160
|
|
243
|
-
},
|
|
244
|
-
layout2_col5: {
|
|
245
|
-
w: 200,
|
|
246
|
-
h: 200
|
|
247
|
-
},
|
|
248
|
-
layout3_col6: {
|
|
249
|
-
w: 160,
|
|
250
|
-
h: 160
|
|
251
|
-
},
|
|
252
|
-
layout3_col5: {
|
|
253
|
-
w: 200,
|
|
254
|
-
h: 200
|
|
255
|
-
}
|
|
256
|
-
};
|
|
257
|
-
|
|
258
235
|
var RecommendMobile =
|
|
259
236
|
/** @class */
|
|
260
237
|
function (_super) {
|
|
@@ -284,7 +261,7 @@ function (_super) {
|
|
|
284
261
|
|
|
285
262
|
_this.listenWidth = function () {
|
|
286
263
|
setTimeout(function () {
|
|
287
|
-
var renderContainer = document.querySelector(".macyContainer_" + _this.props.panelProps.id);
|
|
264
|
+
var renderContainer = document.querySelector(".macyContainer_" + _this.props.panelProps.id) || document.querySelector(".scrollContainer_" + _this.props.panelProps.id);
|
|
288
265
|
if (renderContainer) _this.setState({
|
|
289
266
|
contentWidth: renderContainer.offsetWidth
|
|
290
267
|
});
|
|
@@ -461,7 +438,7 @@ function (_super) {
|
|
|
461
438
|
if (document.querySelector(".macyContainer_" + _this.props.panelProps.id)) {
|
|
462
439
|
_this.getMacy(".macyContainer_" + _this.props.panelProps.id, customize.pcRowNum);
|
|
463
440
|
}
|
|
464
|
-
});
|
|
441
|
+
}, 10);
|
|
465
442
|
};
|
|
466
443
|
|
|
467
444
|
_this.getMacy = function (container, columns) {
|
|
@@ -471,8 +448,8 @@ function (_super) {
|
|
|
471
448
|
waitForImages: false,
|
|
472
449
|
useOwnImageLoader: false,
|
|
473
450
|
margin: {
|
|
474
|
-
x:
|
|
475
|
-
y:
|
|
451
|
+
x: 24,
|
|
452
|
+
y: 24
|
|
476
453
|
},
|
|
477
454
|
columns: columns
|
|
478
455
|
});
|
|
@@ -618,11 +595,10 @@ function (_super) {
|
|
|
618
595
|
}, 0);
|
|
619
596
|
}
|
|
620
597
|
|
|
621
|
-
this.preLayout = curLayout;
|
|
622
598
|
var curContent = JSON.stringify(panelProps.content);
|
|
623
599
|
var curSpacing = JSON.stringify(panelProps.spacing);
|
|
624
600
|
|
|
625
|
-
if (curSpacing !== this.preSpacing) {
|
|
601
|
+
if (curLayout !== this.preLayout || curSpacing !== this.preSpacing) {
|
|
626
602
|
this.listenWidth();
|
|
627
603
|
}
|
|
628
604
|
|
|
@@ -630,6 +606,7 @@ function (_super) {
|
|
|
630
606
|
this.resetLayout();
|
|
631
607
|
}
|
|
632
608
|
|
|
609
|
+
this.preLayout = curLayout;
|
|
633
610
|
this.preContent = curContent;
|
|
634
611
|
this.preSpacing = curSpacing;
|
|
635
612
|
};
|
|
@@ -655,13 +632,11 @@ function (_super) {
|
|
|
655
632
|
return groupSource[tabIndex].seeAll;
|
|
656
633
|
}, '');
|
|
657
634
|
|
|
658
|
-
var
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
var
|
|
662
|
-
|
|
663
|
-
}, 140);
|
|
664
|
-
if (layout === 'layout1' && contentWidth) imgHeight = (contentWidth - 12 * (panelProps.customize.pcRowNum - 1)) / panelProps.customize.pcRowNum;
|
|
635
|
+
var imgSize = 140;
|
|
636
|
+
var otherWidth = layout === 'layout3' ? 100 : 0;
|
|
637
|
+
var colNumber = layout === 'layout1' ? panelProps.customize.pcRowNum : panelProps.customize.pcRowNum + 0.5;
|
|
638
|
+
var spaceNumber = layout === 'layout1' ? panelProps.customize.pcRowNum - 1 : panelProps.customize.pcRowNum;
|
|
639
|
+
if (contentWidth) imgSize = (contentWidth - 24 * spaceNumber - otherWidth) / colNumber;
|
|
665
640
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
666
641
|
className: "m-recommend-pc"
|
|
667
642
|
}, !hideTabs && /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -723,8 +698,8 @@ function (_super) {
|
|
|
723
698
|
key: item.productId,
|
|
724
699
|
data: item,
|
|
725
700
|
fixHeight: true,
|
|
726
|
-
imgHeight:
|
|
727
|
-
imgWidth:
|
|
701
|
+
imgHeight: imgSize,
|
|
702
|
+
imgWidth: "100%",
|
|
728
703
|
onItemClick: function onItemClick() {
|
|
729
704
|
return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId);
|
|
730
705
|
},
|
|
@@ -739,7 +714,7 @@ function (_super) {
|
|
|
739
714
|
})) : /*#__PURE__*/_react["default"].createElement("div", {
|
|
740
715
|
key: "scrollContainer",
|
|
741
716
|
ref: this.scrollRef,
|
|
742
|
-
className: (0, _classnames["default"])(
|
|
717
|
+
className: (0, _classnames["default"])("scrollContainer scrollContainer_" + panelProps.id, {
|
|
743
718
|
pl_100: layout === 'layout3'
|
|
744
719
|
})
|
|
745
720
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -751,8 +726,8 @@ function (_super) {
|
|
|
751
726
|
key: "scroll_" + item.productId,
|
|
752
727
|
data: item,
|
|
753
728
|
fixHeight: true,
|
|
754
|
-
imgHeight:
|
|
755
|
-
imgWidth:
|
|
729
|
+
imgHeight: imgSize,
|
|
730
|
+
imgWidth: imgSize,
|
|
756
731
|
onItemClick: function onItemClick() {
|
|
757
732
|
return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId);
|
|
758
733
|
},
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fonixtree/magic-design",
|
|
3
3
|
"author": "Cylon Team",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.150",
|
|
5
5
|
"description": "Magic Design",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
"cl": "node ./bin/createLocale.js create",
|
|
13
13
|
"pub": "sh ./bin/publish.sh",
|
|
14
14
|
"gulp": "npx gulp -f ./config/gulp.js",
|
|
15
|
+
"build": "node scripts/build.js",
|
|
15
16
|
"iconfont": "node ./bin/iconfont.js update",
|
|
16
17
|
"export": "rm -rf dist && npx rollup --config ./config/rollup.config.js",
|
|
17
18
|
"compile": "sh ./bin/compile.sh",
|