@fonixtree/magic-design 0.0.126 → 0.0.130

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.
Files changed (33) hide show
  1. package/es/composite-comp/bol/components/Carousel/defaultJSON.js +5 -4
  2. package/es/composite-comp/bol/components/Carousel/mobile/index.js +18 -17
  3. package/es/composite-comp/bol/components/Carousel/mobile/index.less +1 -1
  4. package/es/composite-comp/bol/components/Carousel/pc/index.js +35 -34
  5. package/es/composite-comp/bol/components/Carousel/pc/index.less +4 -4
  6. package/es/composite-comp/bol/components/ImageGallery/mobile/index.js +0 -5
  7. package/es/composite-comp/bol/components/ImageGallery/pc/index.js +0 -6
  8. package/es/composite-comp/bol/components/ImageText/mobile/index.less +2 -1
  9. package/es/composite-comp/bol/components/Tag/defaultJSON.js +15 -2
  10. package/es/composite-comp/bol/components/Tag/index.js +1 -1
  11. package/es/composite-comp/bol/second-config-panels/CarouselSecondConfig/index.js +1 -0
  12. package/es/composite-comp/dito/components/MobileNavigation/mobile/index.less +1 -1
  13. package/es/composite-comp/dito/components/PcNavigation/pc/index.less +1 -1
  14. package/es/composite-comp/dito/components/Recommend/mobile/index.js +1 -1
  15. package/es/composite-comp/dito/components/Recommend/pc/index.js +16 -41
  16. package/es/composite-comp/dito/components/Recommend/pc/index.less +2 -2
  17. package/lib/composite-comp/bol/components/Carousel/defaultJSON.js +5 -4
  18. package/lib/composite-comp/bol/components/Carousel/mobile/index.js +18 -17
  19. package/lib/composite-comp/bol/components/Carousel/mobile/index.less +1 -1
  20. package/lib/composite-comp/bol/components/Carousel/pc/index.js +35 -34
  21. package/lib/composite-comp/bol/components/Carousel/pc/index.less +4 -4
  22. package/lib/composite-comp/bol/components/ImageGallery/mobile/index.js +0 -5
  23. package/lib/composite-comp/bol/components/ImageGallery/pc/index.js +0 -6
  24. package/lib/composite-comp/bol/components/ImageText/mobile/index.less +2 -1
  25. package/lib/composite-comp/bol/components/Tag/defaultJSON.js +15 -2
  26. package/lib/composite-comp/bol/components/Tag/index.js +1 -1
  27. package/lib/composite-comp/bol/second-config-panels/CarouselSecondConfig/index.js +1 -0
  28. package/lib/composite-comp/dito/components/MobileNavigation/mobile/index.less +1 -1
  29. package/lib/composite-comp/dito/components/PcNavigation/pc/index.less +1 -1
  30. package/lib/composite-comp/dito/components/Recommend/mobile/index.js +1 -1
  31. package/lib/composite-comp/dito/components/Recommend/pc/index.js +16 -41
  32. package/lib/composite-comp/dito/components/Recommend/pc/index.less +2 -2
  33. 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: 600,
111
- fontSize: 14,
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
- maxW: 375,
74
- maxH: 160
75
- }, {
76
- maxW: 169,
77
- maxH: 126
78
- }, {
79
- maxW: 109,
80
- maxH: 82
81
- }, {
82
- maxW: 78,
83
- maxH: 58
84
- }, {
85
- maxW: 50,
86
- maxH: 50
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 - 1].maxH
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, {
@@ -48,7 +48,7 @@
48
48
  .text {
49
49
  display: flex;
50
50
  justify-content: center;
51
- margin-top: 2px;
51
+ margin-top: 6px;
52
52
  }
53
53
 
54
54
  .tags {
@@ -55,37 +55,38 @@ var __extends = void 0 && (void 0).__extends || function () {
55
55
  };
56
56
  }();
57
57
 
58
- var PC_IMG_SIZE = [{
59
- minW: 150,
60
- maxW: 1072,
61
- minH: 150,
62
- maxH: 400
63
- }, {
64
- minW: 150,
65
- maxW: 524,
66
- minH: 150,
67
- maxH: 524
68
- }, {
69
- minW: 100,
70
- maxW: 341,
71
- minH: 100,
72
- maxH: 341
73
- }, {
74
- minW: 100,
75
- maxW: 251,
76
- minH: 100,
77
- maxH: 251
78
- }, {
79
- minW: 100,
80
- maxW: 195,
81
- minH: 100,
82
- maxH: 195
83
- }, {
84
- minW: 100,
85
- maxW: 168,
86
- minH: 100,
87
- maxH: 168
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 - 1].maxH,
236
- minHeight: PC_IMG_SIZE[colNum - 1].minH,
237
- minWidth: PC_IMG_SIZE[colNum - 1].minW
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: 12px;
59
+ margin-top: 24px;
60
60
  }
61
61
 
62
62
  .text {
63
63
  display: flex;
64
64
  justify-content: center;
65
- margin-top: 2px;
65
+ margin-top: 6px;
66
66
  }
67
67
 
68
68
  .tags {
69
- margin-top: 8px;
70
- margin-bottom: 12px;
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
@@ -116,10 +116,11 @@
116
116
  flex-direction: column;
117
117
  .card-image-wrap {
118
118
  width: 100%;
119
+ padding: 8px;
119
120
  .card-image {
120
121
  // max-height: 107px;
121
122
  width: fit-content;
122
- margin: 0 auto 7px;
123
+ margin: 0 auto;
123
124
  }
124
125
  }
125
126
 
@@ -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
  },
@@ -1,7 +1,7 @@
1
1
  .mobile-navigation-mobile {
2
2
  // display: flex;
3
3
  // flex-direction: column;
4
- padding-top: 18px;
4
+ // padding-top: 18px;
5
5
  .group-wrap {
6
6
  padding: 0 20px;
7
7
  display: flex;
@@ -91,7 +91,7 @@
91
91
  .category-group {
92
92
  display: flex;
93
93
  overflow-x: auto;
94
- flex: 1;
94
+ // flex: 1;
95
95
  scroll-snap-type: x;
96
96
  .one-category {
97
97
  margin-right: 44px;
@@ -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: 12,
475
- y: 12
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 imgWidth = (0, _commonUtil.ensure)(function () {
659
- return layout === 'layout1' ? LAYOUT_IMAGE_SIZE[layout].w : LAYOUT_IMAGE_SIZE[layout + "_col" + panelProps.customize.pcRowNum].w;
660
- }, 140);
661
- var imgHeight = (0, _commonUtil.ensure)(function () {
662
- return layout === 'layout1' ? LAYOUT_IMAGE_SIZE[layout].h : LAYOUT_IMAGE_SIZE[layout + "_col" + panelProps.customize.pcRowNum].h;
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: imgHeight,
727
- imgWidth: 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"])('scrollContainer', {
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: imgHeight,
755
- imgWidth: imgWidth,
729
+ imgHeight: imgSize,
730
+ imgWidth: imgSize,
756
731
  onItemClick: function onItemClick() {
757
732
  return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId);
758
733
  },
@@ -74,11 +74,11 @@
74
74
  cursor: pointer;
75
75
 
76
76
  &.left {
77
- margin-right: 40px;
77
+ margin-right: 15px;
78
78
  }
79
79
 
80
80
  &.right {
81
- margin-left: 40px;
81
+ margin-left: 15px;
82
82
  }
83
83
  }
84
84
 
@@ -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: 600,
111
- fontSize: 14,
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
- maxW: 375,
74
- maxH: 160
75
- }, {
76
- maxW: 169,
77
- maxH: 126
78
- }, {
79
- maxW: 109,
80
- maxH: 82
81
- }, {
82
- maxW: 78,
83
- maxH: 58
84
- }, {
85
- maxW: 50,
86
- maxH: 50
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 - 1].maxH
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, {
@@ -48,7 +48,7 @@
48
48
  .text {
49
49
  display: flex;
50
50
  justify-content: center;
51
- margin-top: 2px;
51
+ margin-top: 6px;
52
52
  }
53
53
 
54
54
  .tags {
@@ -55,37 +55,38 @@ var __extends = void 0 && (void 0).__extends || function () {
55
55
  };
56
56
  }();
57
57
 
58
- var PC_IMG_SIZE = [{
59
- minW: 150,
60
- maxW: 1072,
61
- minH: 150,
62
- maxH: 400
63
- }, {
64
- minW: 150,
65
- maxW: 524,
66
- minH: 150,
67
- maxH: 524
68
- }, {
69
- minW: 100,
70
- maxW: 341,
71
- minH: 100,
72
- maxH: 341
73
- }, {
74
- minW: 100,
75
- maxW: 251,
76
- minH: 100,
77
- maxH: 251
78
- }, {
79
- minW: 100,
80
- maxW: 195,
81
- minH: 100,
82
- maxH: 195
83
- }, {
84
- minW: 100,
85
- maxW: 168,
86
- minH: 100,
87
- maxH: 168
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 - 1].maxH,
236
- minHeight: PC_IMG_SIZE[colNum - 1].minH,
237
- minWidth: PC_IMG_SIZE[colNum - 1].minW
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: 12px;
59
+ margin-top: 24px;
60
60
  }
61
61
 
62
62
  .text {
63
63
  display: flex;
64
64
  justify-content: center;
65
- margin-top: 2px;
65
+ margin-top: 6px;
66
66
  }
67
67
 
68
68
  .tags {
69
- margin-top: 8px;
70
- margin-bottom: 12px;
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
@@ -116,10 +116,11 @@
116
116
  flex-direction: column;
117
117
  .card-image-wrap {
118
118
  width: 100%;
119
+ padding: 8px;
119
120
  .card-image {
120
121
  // max-height: 107px;
121
122
  width: fit-content;
122
- margin: 0 auto 7px;
123
+ margin: 0 auto;
123
124
  }
124
125
  }
125
126
 
@@ -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
  },
@@ -1,7 +1,7 @@
1
1
  .mobile-navigation-mobile {
2
2
  // display: flex;
3
3
  // flex-direction: column;
4
- padding-top: 18px;
4
+ // padding-top: 18px;
5
5
  .group-wrap {
6
6
  padding: 0 20px;
7
7
  display: flex;
@@ -91,7 +91,7 @@
91
91
  .category-group {
92
92
  display: flex;
93
93
  overflow-x: auto;
94
- flex: 1;
94
+ // flex: 1;
95
95
  scroll-snap-type: x;
96
96
  .one-category {
97
97
  margin-right: 44px;
@@ -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: 12,
475
- y: 12
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 imgWidth = (0, _commonUtil.ensure)(function () {
659
- return layout === 'layout1' ? LAYOUT_IMAGE_SIZE[layout].w : LAYOUT_IMAGE_SIZE[layout + "_col" + panelProps.customize.pcRowNum].w;
660
- }, 140);
661
- var imgHeight = (0, _commonUtil.ensure)(function () {
662
- return layout === 'layout1' ? LAYOUT_IMAGE_SIZE[layout].h : LAYOUT_IMAGE_SIZE[layout + "_col" + panelProps.customize.pcRowNum].h;
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: imgHeight,
727
- imgWidth: 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"])('scrollContainer', {
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: imgHeight,
755
- imgWidth: imgWidth,
729
+ imgHeight: imgSize,
730
+ imgWidth: imgSize,
756
731
  onItemClick: function onItemClick() {
757
732
  return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId);
758
733
  },
@@ -74,11 +74,11 @@
74
74
  cursor: pointer;
75
75
 
76
76
  &.left {
77
- margin-right: 40px;
77
+ margin-right: 15px;
78
78
  }
79
79
 
80
80
  &.right {
81
- margin-left: 40px;
81
+ margin-left: 15px;
82
82
  }
83
83
  }
84
84
 
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.126",
4
+ "version": "0.0.130",
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",