@fonixtree/magic-design 0.0.39 → 0.0.41

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 (19) hide show
  1. package/es/composite-comp/common/components/ProductItem/index.less +7 -6
  2. package/es/composite-comp/dito/components/MobileNavigation/defaultJSON.js +1 -3
  3. package/es/composite-comp/dito/components/MobileNavigation/mobile/index.js +24 -36
  4. package/es/composite-comp/dito/components/MobileNavigation/mobile/index.less +18 -273
  5. package/es/composite-comp/dito/components/Recommend/defaultJSON.js +2 -8
  6. package/es/composite-comp/dito/components/Recommend/mobile/index.js +30 -24
  7. package/es/meta-comp/components/Image/image/default-img.png +0 -0
  8. package/es/meta-comp/components/Image/index.js +4 -1
  9. package/lib/composite-comp/common/components/ProductItem/index.less +7 -6
  10. package/lib/composite-comp/dito/components/MobileNavigation/defaultJSON.js +1 -3
  11. package/lib/composite-comp/dito/components/MobileNavigation/mobile/index.js +24 -36
  12. package/lib/composite-comp/dito/components/MobileNavigation/mobile/index.less +18 -273
  13. package/lib/composite-comp/dito/components/Recommend/defaultJSON.js +2 -8
  14. package/lib/composite-comp/dito/components/Recommend/mobile/index.js +30 -24
  15. package/lib/meta-comp/components/Image/image/default-img.png +0 -0
  16. package/lib/meta-comp/components/Image/index.js +4 -1
  17. package/package.json +1 -1
  18. package/es/meta-comp/components/Image/image/defalut-img.png +0 -0
  19. package/lib/meta-comp/components/Image/image/defalut-img.png +0 -0
package/es/composite-comp/common/components/ProductItem/index.less CHANGED
@@ -4,11 +4,14 @@
4
4
  background: #FFFFFF;
5
5
  border: 1px solid #D2D9E5;
6
6
  width: 142px;
7
+ border-radius: 8px;
7
8
 
8
9
  .img-wrap {
9
10
  position: relative;
11
+ border-radius: 8px;
10
12
 
11
13
  .product-img {
14
+ border-radius: 8px;
12
15
  width: 140px;
13
16
  height: 140px;
14
17
  object-fit: cover;
@@ -33,7 +36,7 @@
33
36
  }
34
37
 
35
38
  .product-name {
36
- margin-bottom: 3px;
39
+ margin-bottom: 5px;
37
40
  // font-family: 'Montserrat';
38
41
  // font-style: normal;
39
42
  // font-weight: 500;
@@ -57,7 +60,7 @@
57
60
 
58
61
  .old-price-wrap {
59
62
  display: flex;
60
- margin-top: 0px;
63
+ margin-top: 3px;
61
64
  align-items: baseline;
62
65
  white-space: nowrap;
63
66
  overflow: hidden;
@@ -68,11 +71,9 @@
68
71
  font-family: 'Montserrat';
69
72
  font-style: normal;
70
73
  font-weight: 700;
71
- font-size: 8px;
74
+ font-size: 12px;
72
75
  line-height: 15px;
73
- color: #fff;
74
- padding: 0 4px;
75
- background-color: #CE1126;
76
+ color: #2F3043;
76
77
  }
77
78
 
78
79
  .old-price {
package/es/composite-comp/dito/components/MobileNavigation/defaultJSON.js CHANGED
@@ -7,8 +7,6 @@ exports.getDefaultJSON = exports.MobileNavGroupSourceJSON = void 0;
7
7
 
8
8
  var _uuid = require("uuid");
9
9
 
10
- var _locale = require("../../../../locale");
11
-
12
10
  var MobileNavGroupSourceJSON = function MobileNavGroupSourceJSON() {
13
11
  var groupId = (0, _uuid.v4)();
14
12
  return {
@@ -39,7 +37,7 @@ var MobileNavGroupSourceJSON = function MobileNavGroupSourceJSON() {
39
37
  open: true,
40
38
  type: 'TEXT',
41
39
  specialContent: [],
42
- text: (0, _locale.i18n)('NAVIGATION_NAME'),
40
+ text: 'name',
43
41
  content: {
44
42
  sizeType: 'Headline 1',
45
43
  fontFamily: 'Open Sans',
package/es/composite-comp/dito/components/MobileNavigation/mobile/index.js CHANGED
@@ -11,9 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
11
11
 
12
12
  require("./index.less");
13
13
 
14
- var _AlignSelector = require("../../../../../common/AlignSelector");
15
-
16
- var _businessUtil = require("../../../../../utils/businessUtil");
14
+ var _components = require("../../../../../meta-comp/components");
17
15
 
18
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
19
17
 
@@ -57,25 +55,12 @@ function (_super) {
57
55
 
58
56
  _this.getCardStyle = function (source, i) {
59
57
  var data = _this.props.data;
60
- var cardStyle = {
61
- textAlign: data.customize.align
62
- };
63
-
64
- if (data.customize.layout.h5Layout !== 'centerM' && data.customize.layout.h5Layout !== 'normal1') {
65
- cardStyle.alignItems = _AlignSelector.alignItemMap[data.customize.align];
66
- }
58
+ var cardStyle = {};
59
+ cardStyle.marginRight = (1 + i) % data.customize.rowNum !== 0 ? '2%' : 0;
67
60
 
68
- if (data.customize.layout.h5Layout === 'normal3') {
61
+ if (data.customize.layout === 'newline') {
62
+ cardStyle.marginBottom = 12;
69
63
  cardStyle.width = _this.calcWidth(data.customize.rowNum);
70
- cardStyle.marginRight = (1 + i) % data.customize.rowNum !== 0 ? '2%' : 0;
71
- }
72
-
73
- if (source.background.bgType == 'color') {
74
- cardStyle.backgroundColor = source.background.color;
75
- cardStyle.opacity = source.background.opacity ? source.background.opacity : 1;
76
- } else {
77
- cardStyle.backgroundImage = "url(" + source.background.image + ")";
78
- cardStyle.backgroundPosition = 'center';
79
64
  }
80
65
 
81
66
  return cardStyle;
@@ -85,11 +70,11 @@ function (_super) {
85
70
  }
86
71
 
87
72
  NavigationMobile.prototype.render = function () {
73
+ var _this = this;
74
+
88
75
  var data = this.props.data; // const { ready } = this.state;
89
- // console.log('----imagetext mobile', data);
90
76
 
91
- var wrapStyle = (0, _businessUtil.computeStyle)(data, window.magicDesign.device);
92
- wrapStyle.textAlign = data.customize.align; // if (data.background.bgType === 'color') {
77
+ console.log('----nav mobile', data); // if (data.background.bgType === 'color') {
93
78
  // wrapStyle.backgroundColor = data.background.color;
94
79
  // wrapStyle.opacity = data.background.opacity ? data.background.opacity : 1;
95
80
  // } else {
@@ -97,25 +82,28 @@ function (_super) {
97
82
  // wrapStyle.backgroundPosition = 'center';
98
83
  // }
99
84
 
100
- var cardBtnStyle = {};
101
-
102
- if (data.customize.layout.h5Layout === 'normal3') {
103
- cardBtnStyle.alignItems = _AlignSelector.alignItemMap[data.customize.align];
104
- }
105
-
106
- if (data.customize.layout.h5Layout === 'normal2' || data.customize.layout.h5Layout === 'normal1' || data.customize.layout.h5Layout === 'outsideM') {
107
- cardBtnStyle.justifyContent = _AlignSelector.alignItemMap[data.customize.align];
108
- }
109
-
110
85
  return /*#__PURE__*/_react["default"].createElement("div", {
111
- className: (0, _classnames["default"])('mobile-navigation-mobile', data.customize.layout.h5Layout)
86
+ className: (0, _classnames["default"])('mobile-navigation-mobile', data.customize.layout)
112
87
  }, (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
113
88
  className: "group-wrap"
114
89
  }, data.groupSource.map(function (source, i) {
115
90
  return /*#__PURE__*/_react["default"].createElement("div", {
116
91
  key: source.id,
117
- className: data.groupSource.length > data.customize.rowNum ? 'one-card card-margin-bottom' : 'one-card'
118
- }, "11");
92
+ className: "one-card" // className={data.groupSource.length > data.customize.rowNum ? 'one-card card-margin-bottom' : 'one-card'}
93
+ ,
94
+ style: _this.getCardStyle(source, i)
95
+ }, source.image.open && /*#__PURE__*/_react["default"].createElement("div", {
96
+ className: "card-image-wrap"
97
+ }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
98
+ className: "card-image",
99
+ data: source.image,
100
+ limitWidthHeight: true,
101
+ maxHeight: 82,
102
+ scale: 0.5
103
+ })), source.title.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
104
+ className: "card-text",
105
+ data: source.title
106
+ }));
119
107
  })));
120
108
  };
121
109
 
package/es/composite-comp/dito/components/MobileNavigation/mobile/index.less CHANGED
@@ -1,292 +1,37 @@
1
- .image-text-mobile {
1
+ .mobile-navigation-mobile {
2
2
  // display: flex;
3
3
  // flex-direction: column;
4
- padding: 17px 0;
5
- .headline {
6
- margin-bottom: 8px;
7
- }
8
- .subtitle {
9
- margin-bottom: 36px;
10
- }
11
- .group-wrap .one-card .card-btn-wrap {
12
- .card-first-btn, .card-second-btn {
13
- width: fit-content;
14
- }
15
- }
16
-
17
- .btn-wrap {
18
- display: flex;
19
- width: 100%;
20
- justify-content: center;
21
-
22
- .first-btn {
23
- margin-top: 36px;
24
- }
25
- .second-btn {
26
- margin-top: 36px;
27
- margin-left: 12px;
28
- }
29
- }
30
- }
31
- .normal1 {
32
- .group-wrap {
33
- padding: 0 15px;
34
- width: 100%;
35
- .one-card {
36
- display: flex;
37
- align-items: stretch;
38
- padding: 18px;
39
- margin-bottom: 8px;
40
- &:last-of-type {
41
- margin-bottom: 0;
42
- }
43
- .card-image-wrap {
44
- flex-shrink: 0;
45
- margin-right: 12px;
46
- }
47
- .card-content-wrap {
48
- flex: 1;
49
- display: flex;
50
- flex-direction: column;
51
- justify-content: center;
52
- .card-title {
53
- margin-bottom: 6px;
54
- text-align: left !important;
55
- }
56
- .card-text {
57
- margin-bottom: 12px;
58
- text-align: left !important;
59
- }
60
- .card-btn-wrap {
61
- display: flex;
62
- .card-first-btn {
63
- margin-right: 12px;
64
- }
65
- }
66
- }
67
- }
68
- }
69
- }
70
-
71
- .normal2 {
72
- .group-wrap {
73
- width: 100%;
74
- padding: 0 15px;
75
- .one-card {
76
- width: 100%;
77
- padding: 20px 16px;
78
- margin-bottom: 36px;
79
- &:last-of-type {
80
- margin-bottom: 0;
81
- }
82
- .card-image-wrap {
83
- .card-image {
84
- width: fit-content;
85
- margin: 0 auto;
86
- }
87
- }
88
- .card-content-wrap {
89
- .card-title {
90
- margin-bottom: 8px;
91
- }
92
- .card-text {
93
- margin-bottom: 16px;
94
- }
95
- .card-btn-wrap {
96
- display: flex;
97
- .card-first-btn {
98
- margin-right: 12px;
99
- }
100
- }
101
- }
102
- }
103
- }
104
- }
105
- .normal3 {
4
+ padding: 18px 0;
106
5
  .group-wrap {
6
+ padding: 0 20px;
107
7
  display: flex;
108
- // margin-bottom: 36px;
109
- // margin-top: 36px;
110
- flex-wrap: wrap;
111
- width: 100%;
112
- padding: 0 15px;
113
-
114
8
  .one-card {
115
- display: flex;
116
- flex-direction: column;
117
- .card-image-wrap {
118
- width: 100%;
119
- .card-image {
120
- // max-height: 107px;
121
- width: fit-content;
122
- margin: 0 auto 7px;
123
- }
124
- }
9
+ // display: flex;
125
10
 
126
- .card-title {
11
+ .card-image-wrap {
127
12
  margin-bottom: 4px;
128
- }
129
-
130
- .card-text {
131
- margin-bottom: 7px;
132
- }
133
- .card-btn-wrap {
134
- display: flex;
135
- flex-direction: column;
136
- }
137
-
138
- .card-second-btn {
139
- margin-top: 8px;
13
+ width: 100%;
140
14
  }
141
15
  }
142
- .card-margin-bottom {
143
- margin-bottom: 10px;
144
- }
145
- }
16
+ }
17
+
146
18
  }
147
19
 
148
- .outsideM {
20
+ .newline {
149
21
  .group-wrap {
150
- padding: 0 15px;
151
- width: 100%;
152
- .one-card {
153
- margin-top: 35px;
154
- position: relative;
155
- padding: 30px 10px 20px 36px;
156
- .card-image-wrap {
157
- position: absolute;
158
- left: 18px;
159
- top: 0;
160
- transform: translateY(-50%);
161
- }
162
- .card-content-wrap {
163
- .card-title {
164
- margin-bottom: 4px;
165
- text-align: left !important;
166
- }
167
- .card-text {
168
- margin-bottom: 12px;
169
- text-align: left !important;
170
- }
171
- .card-btn-wrap {
172
- display: flex;
173
- .card-first-btn {
174
- margin-right: 12px;
175
- }
176
- }
177
- }
178
- }
22
+ flex-wrap: wrap;
179
23
  }
180
24
  }
181
25
 
182
- .centerM {
26
+ .tile {
183
27
  .group-wrap {
184
- position: relative;
185
- width: 100%;
186
- &::before {
187
- content: '';
188
- position: absolute;
189
- width: 1px;
190
- height: 100%;
191
- border-right: 1px dashed #D2D9E5;
192
- left: 50%;
193
- transform: translateX(-50%);
194
- }
28
+ // overflow-x: scroll;
29
+ overflow-x: auto;
30
+ flex-wrap: nowrap;
31
+ scroll-snap-type: x;
195
32
  .one-card {
196
- width: calc((100% - 1px)/2);
197
- position: relative;
198
- padding: 0 14px 16px;
199
- &::before {
200
- content: '';
201
- position: absolute;
202
- border-radius: 50%;
203
- background: #2F54EB;
204
- width: 10px;
205
- height: 10px;
206
- z-index: 10;
207
- border: 2px solid #CCE3FF;
208
- }
209
- // &::before {
210
- // opacity: 0.2;
211
- // width: 10px;
212
- // height: 10px;
213
- // }
214
- &:nth-of-type(2n-1) {
215
- left: 0;
216
- &::before {
217
- right: -5px;
218
- top: 5px;
219
- }
220
- // &::after {
221
- // right: -3px;
222
- // top: 7px;
223
- // }
224
- .card-content-wrap {
225
- display: flex;
226
- flex-direction: column;
227
- align-items: flex-end;
228
- .card-title, .card-text {
229
- text-align: right !important;
230
- }
231
- .image-subtext-wrap {
232
- flex-direction: row-reverse;
233
- .card-image-wrap {
234
- margin-left: 8px;
235
- }
236
- // .card-text {
237
- // .m-meta-text {
238
- // text-align: right !important;
239
- // }
240
- // }
241
- }
242
- .card-btn-wrap {
243
- display: flex;
244
- flex-direction: column;
245
- align-items: flex-end;
246
- }
247
- }
248
- }
249
- &:nth-of-type(2n) {
250
- left: 50%;
251
- &::before {
252
- left: -5px;
253
- top: 5px;
254
- }
255
- // &::after {
256
- // left: -3px;
257
- // top: 7px;
258
- // }
259
- .card-content-wrap {
260
- .card-title, .card-text {
261
- text-align: left !important;
262
- }
263
- .image-subtext-wrap {
264
- .card-image-wrap {
265
- margin-right: 8px;
266
- }
267
- // .card-text {
268
- // .m-meta-text {
269
- // text-align: left !important;
270
- // }
271
- // }
272
- }
273
- }
274
- }
275
- .card-content-wrap {
276
- .card-title {
277
- margin-bottom: 10px;
278
- }
279
- .image-subtext-wrap {
280
- display: flex;
281
- margin-bottom: 20px;
282
- align-items: center;
283
- }
284
- .card-btn-wrap {
285
- .card-second-btn {
286
- margin-top: 12px;
287
- }
288
- }
289
- }
33
+ scroll-snap-align: end;
34
+ min-width: 30%;
290
35
  }
291
36
  }
292
- }
37
+ }
package/es/composite-comp/dito/components/Recommend/defaultJSON.js CHANGED
@@ -279,14 +279,8 @@ var getDefaultJSON = function getDefaultJSON() {
279
279
  }
280
280
  },
281
281
  customize: {
282
- layout: {
283
- pcLayout: 'layout1',
284
- h5Layout: 'layout1'
285
- },
286
- align: 'left',
287
- pcRowNum: 6,
288
- pcMaxRowNum: 6,
289
- pcMinRowNum: 5
282
+ layout: 'left',
283
+ align: 'left'
290
284
  },
291
285
  background: {
292
286
  opacity: 100,
package/es/composite-comp/dito/components/Recommend/mobile/index.js CHANGED
@@ -227,6 +227,10 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
227
227
  };
228
228
 
229
229
  var LAYOUT_IMAGE_SIZE = {
230
+ left: {
231
+ w: '100%',
232
+ h: 165
233
+ },
230
234
  layout1: {
231
235
  w: '100%',
232
236
  h: 164
@@ -412,8 +416,10 @@ function (_super) {
412
416
  };
413
417
 
414
418
  _this.resetLayout = function () {
415
- var layout = _this.props.panelProps.customize.layout.h5Layout;
419
+ var layout = _this.props.panelProps.customize.layout.h5Layout || _this.props.panelProps.customize.layout; // 后面删除
420
+
416
421
  var LAYOUT_COLUMN = {
422
+ left: 2,
417
423
  layout1: 2,
418
424
  layout2: 1,
419
425
  layout3: 3
@@ -537,7 +543,7 @@ function (_super) {
537
543
  hideTabs: hideTabs
538
544
  });
539
545
  });
540
- var curLayout = panelProps.customize.layout.h5Layout;
546
+ var curLayout = panelProps.customize.layout.h5Layout || panelProps.customize.layout; // 后面删除
541
547
 
542
548
  if (curLayout !== this.preLayout) {
543
549
  this.resetLayout();
@@ -559,7 +565,7 @@ function (_super) {
559
565
  var bgStyle = this.getBackgroundStyle();
560
566
  var products = this.state["products" + tabIndex] || [];
561
567
  var isDivide = groupSource.length <= 3;
562
- var layout = panelProps.customize.layout.h5Layout;
568
+ var layout = panelProps.customize.layout.h5Layout || panelProps.customize.layout; // 后面删除
563
569
 
564
570
  var _seeAll = (0, _commonUtil.ensure)(function () {
565
571
  return groupSource[tabIndex].seeAll;
@@ -611,27 +617,7 @@ function (_super) {
611
617
  transform: "translateX(" + tabLeft + "px)",
612
618
  background: this.getTabBarActiveColor(panelProps)
613
619
  }
614
- })), ['layout1', 'layout2', 'layout3'].includes(layout) ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
615
- key: "macyContainer",
616
- className: "macyContainer"
617
- }, products.map(function (item) {
618
- return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
619
- key: item.productId,
620
- data: item,
621
- fixHeight: layout === 'layout3',
622
- imgHeight: imgHeight,
623
- imgWidth: imgWidth,
624
- layout: layout === 'layout2' ? 'horizontal' : 'vertical',
625
- onItemClick: function onItemClick() {
626
- return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
627
- },
628
- panelProps: panelProps.content,
629
- showProgress: false
630
- });
631
- })), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
632
- className: "btnSeeAll",
633
- data: _seeAll
634
- })) : /*#__PURE__*/_react["default"].createElement("div", {
620
+ })), ['layout4', 'layout5'].includes(layout) ? /*#__PURE__*/_react["default"].createElement("div", {
635
621
  key: "scrollContainer",
636
622
  className: (0, _classnames["default"])('scrollContainer', {
637
623
  pl_100: layout === 'layout5'
@@ -654,6 +640,26 @@ function (_super) {
654
640
  }), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
655
641
  className: "btnSeeAll",
656
642
  data: _seeAll
643
+ })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
644
+ key: "macyContainer",
645
+ className: "macyContainer"
646
+ }, products.map(function (item) {
647
+ return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
648
+ key: item.productId,
649
+ data: item,
650
+ fixHeight: layout === 'layout3',
651
+ imgHeight: imgHeight,
652
+ imgWidth: imgWidth,
653
+ layout: layout === 'layout2' ? 'horizontal' : 'vertical',
654
+ onItemClick: function onItemClick() {
655
+ return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
656
+ },
657
+ panelProps: panelProps.content,
658
+ showProgress: false
659
+ });
660
+ })), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
661
+ className: "btnSeeAll",
662
+ data: _seeAll
657
663
  })));
658
664
  };
659
665
 
package/es/meta-comp/components/Image/index.js CHANGED
@@ -161,7 +161,10 @@ function (_super) {
161
161
 
162
162
  if (window.magicDesign.isShop && (srcImg === null || srcImg === void 0 ? void 0 : srcImg.includes('ecommerce/static'))) {
163
163
  srcImg = srcImg.replace('ecommerce/static', 'static');
164
- }
164
+ } // if (!srcImg) {
165
+ // srcImg = defaultImg;
166
+ // }
167
+
165
168
 
166
169
  return /*#__PURE__*/_react["default"].createElement("div", {
167
170
  className: (0, _classnames["default"])('m-meta-image', {
package/lib/composite-comp/common/components/ProductItem/index.less CHANGED
@@ -4,11 +4,14 @@
4
4
  background: #FFFFFF;
5
5
  border: 1px solid #D2D9E5;
6
6
  width: 142px;
7
+ border-radius: 8px;
7
8
 
8
9
  .img-wrap {
9
10
  position: relative;
11
+ border-radius: 8px;
10
12
 
11
13
  .product-img {
14
+ border-radius: 8px;
12
15
  width: 140px;
13
16
  height: 140px;
14
17
  object-fit: cover;
@@ -33,7 +36,7 @@
33
36
  }
34
37
 
35
38
  .product-name {
36
- margin-bottom: 3px;
39
+ margin-bottom: 5px;
37
40
  // font-family: 'Montserrat';
38
41
  // font-style: normal;
39
42
  // font-weight: 500;
@@ -57,7 +60,7 @@
57
60
 
58
61
  .old-price-wrap {
59
62
  display: flex;
60
- margin-top: 0px;
63
+ margin-top: 3px;
61
64
  align-items: baseline;
62
65
  white-space: nowrap;
63
66
  overflow: hidden;
@@ -68,11 +71,9 @@
68
71
  font-family: 'Montserrat';
69
72
  font-style: normal;
70
73
  font-weight: 700;
71
- font-size: 8px;
74
+ font-size: 12px;
72
75
  line-height: 15px;
73
- color: #fff;
74
- padding: 0 4px;
75
- background-color: #CE1126;
76
+ color: #2F3043;
76
77
  }
77
78
 
78
79
  .old-price {
package/lib/composite-comp/dito/components/MobileNavigation/defaultJSON.js CHANGED
@@ -7,8 +7,6 @@ exports.getDefaultJSON = exports.MobileNavGroupSourceJSON = void 0;
7
7
 
8
8
  var _uuid = require("uuid");
9
9
 
10
- var _locale = require("../../../../locale");
11
-
12
10
  var MobileNavGroupSourceJSON = function MobileNavGroupSourceJSON() {
13
11
  var groupId = (0, _uuid.v4)();
14
12
  return {
@@ -39,7 +37,7 @@ var MobileNavGroupSourceJSON = function MobileNavGroupSourceJSON() {
39
37
  open: true,
40
38
  type: 'TEXT',
41
39
  specialContent: [],
42
- text: (0, _locale.i18n)('NAVIGATION_NAME'),
40
+ text: 'name',
43
41
  content: {
44
42
  sizeType: 'Headline 1',
45
43
  fontFamily: 'Open Sans',
package/lib/composite-comp/dito/components/MobileNavigation/mobile/index.js CHANGED
@@ -11,9 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
11
11
 
12
12
  require("./index.less");
13
13
 
14
- var _AlignSelector = require("../../../../../common/AlignSelector");
15
-
16
- var _businessUtil = require("../../../../../utils/businessUtil");
14
+ var _components = require("../../../../../meta-comp/components");
17
15
 
18
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
19
17
 
@@ -57,25 +55,12 @@ function (_super) {
57
55
 
58
56
  _this.getCardStyle = function (source, i) {
59
57
  var data = _this.props.data;
60
- var cardStyle = {
61
- textAlign: data.customize.align
62
- };
63
-
64
- if (data.customize.layout.h5Layout !== 'centerM' && data.customize.layout.h5Layout !== 'normal1') {
65
- cardStyle.alignItems = _AlignSelector.alignItemMap[data.customize.align];
66
- }
58
+ var cardStyle = {};
59
+ cardStyle.marginRight = (1 + i) % data.customize.rowNum !== 0 ? '2%' : 0;
67
60
 
68
- if (data.customize.layout.h5Layout === 'normal3') {
61
+ if (data.customize.layout === 'newline') {
62
+ cardStyle.marginBottom = 12;
69
63
  cardStyle.width = _this.calcWidth(data.customize.rowNum);
70
- cardStyle.marginRight = (1 + i) % data.customize.rowNum !== 0 ? '2%' : 0;
71
- }
72
-
73
- if (source.background.bgType == 'color') {
74
- cardStyle.backgroundColor = source.background.color;
75
- cardStyle.opacity = source.background.opacity ? source.background.opacity : 1;
76
- } else {
77
- cardStyle.backgroundImage = "url(" + source.background.image + ")";
78
- cardStyle.backgroundPosition = 'center';
79
64
  }
80
65
 
81
66
  return cardStyle;
@@ -85,11 +70,11 @@ function (_super) {
85
70
  }
86
71
 
87
72
  NavigationMobile.prototype.render = function () {
73
+ var _this = this;
74
+
88
75
  var data = this.props.data; // const { ready } = this.state;
89
- // console.log('----imagetext mobile', data);
90
76
 
91
- var wrapStyle = (0, _businessUtil.computeStyle)(data, window.magicDesign.device);
92
- wrapStyle.textAlign = data.customize.align; // if (data.background.bgType === 'color') {
77
+ console.log('----nav mobile', data); // if (data.background.bgType === 'color') {
93
78
  // wrapStyle.backgroundColor = data.background.color;
94
79
  // wrapStyle.opacity = data.background.opacity ? data.background.opacity : 1;
95
80
  // } else {
@@ -97,25 +82,28 @@ function (_super) {
97
82
  // wrapStyle.backgroundPosition = 'center';
98
83
  // }
99
84
 
100
- var cardBtnStyle = {};
101
-
102
- if (data.customize.layout.h5Layout === 'normal3') {
103
- cardBtnStyle.alignItems = _AlignSelector.alignItemMap[data.customize.align];
104
- }
105
-
106
- if (data.customize.layout.h5Layout === 'normal2' || data.customize.layout.h5Layout === 'normal1' || data.customize.layout.h5Layout === 'outsideM') {
107
- cardBtnStyle.justifyContent = _AlignSelector.alignItemMap[data.customize.align];
108
- }
109
-
110
85
  return /*#__PURE__*/_react["default"].createElement("div", {
111
- className: (0, _classnames["default"])('mobile-navigation-mobile', data.customize.layout.h5Layout)
86
+ className: (0, _classnames["default"])('mobile-navigation-mobile', data.customize.layout)
112
87
  }, (data === null || data === void 0 ? void 0 : data.groupSource.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
113
88
  className: "group-wrap"
114
89
  }, data.groupSource.map(function (source, i) {
115
90
  return /*#__PURE__*/_react["default"].createElement("div", {
116
91
  key: source.id,
117
- className: data.groupSource.length > data.customize.rowNum ? 'one-card card-margin-bottom' : 'one-card'
118
- }, "11");
92
+ className: "one-card" // className={data.groupSource.length > data.customize.rowNum ? 'one-card card-margin-bottom' : 'one-card'}
93
+ ,
94
+ style: _this.getCardStyle(source, i)
95
+ }, source.image.open && /*#__PURE__*/_react["default"].createElement("div", {
96
+ className: "card-image-wrap"
97
+ }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
98
+ className: "card-image",
99
+ data: source.image,
100
+ limitWidthHeight: true,
101
+ maxHeight: 82,
102
+ scale: 0.5
103
+ })), source.title.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
104
+ className: "card-text",
105
+ data: source.title
106
+ }));
119
107
  })));
120
108
  };
121
109
 
package/lib/composite-comp/dito/components/MobileNavigation/mobile/index.less CHANGED
@@ -1,292 +1,37 @@
1
- .image-text-mobile {
1
+ .mobile-navigation-mobile {
2
2
  // display: flex;
3
3
  // flex-direction: column;
4
- padding: 17px 0;
5
- .headline {
6
- margin-bottom: 8px;
7
- }
8
- .subtitle {
9
- margin-bottom: 36px;
10
- }
11
- .group-wrap .one-card .card-btn-wrap {
12
- .card-first-btn, .card-second-btn {
13
- width: fit-content;
14
- }
15
- }
16
-
17
- .btn-wrap {
18
- display: flex;
19
- width: 100%;
20
- justify-content: center;
21
-
22
- .first-btn {
23
- margin-top: 36px;
24
- }
25
- .second-btn {
26
- margin-top: 36px;
27
- margin-left: 12px;
28
- }
29
- }
30
- }
31
- .normal1 {
32
- .group-wrap {
33
- padding: 0 15px;
34
- width: 100%;
35
- .one-card {
36
- display: flex;
37
- align-items: stretch;
38
- padding: 18px;
39
- margin-bottom: 8px;
40
- &:last-of-type {
41
- margin-bottom: 0;
42
- }
43
- .card-image-wrap {
44
- flex-shrink: 0;
45
- margin-right: 12px;
46
- }
47
- .card-content-wrap {
48
- flex: 1;
49
- display: flex;
50
- flex-direction: column;
51
- justify-content: center;
52
- .card-title {
53
- margin-bottom: 6px;
54
- text-align: left !important;
55
- }
56
- .card-text {
57
- margin-bottom: 12px;
58
- text-align: left !important;
59
- }
60
- .card-btn-wrap {
61
- display: flex;
62
- .card-first-btn {
63
- margin-right: 12px;
64
- }
65
- }
66
- }
67
- }
68
- }
69
- }
70
-
71
- .normal2 {
72
- .group-wrap {
73
- width: 100%;
74
- padding: 0 15px;
75
- .one-card {
76
- width: 100%;
77
- padding: 20px 16px;
78
- margin-bottom: 36px;
79
- &:last-of-type {
80
- margin-bottom: 0;
81
- }
82
- .card-image-wrap {
83
- .card-image {
84
- width: fit-content;
85
- margin: 0 auto;
86
- }
87
- }
88
- .card-content-wrap {
89
- .card-title {
90
- margin-bottom: 8px;
91
- }
92
- .card-text {
93
- margin-bottom: 16px;
94
- }
95
- .card-btn-wrap {
96
- display: flex;
97
- .card-first-btn {
98
- margin-right: 12px;
99
- }
100
- }
101
- }
102
- }
103
- }
104
- }
105
- .normal3 {
4
+ padding: 18px 0;
106
5
  .group-wrap {
6
+ padding: 0 20px;
107
7
  display: flex;
108
- // margin-bottom: 36px;
109
- // margin-top: 36px;
110
- flex-wrap: wrap;
111
- width: 100%;
112
- padding: 0 15px;
113
-
114
8
  .one-card {
115
- display: flex;
116
- flex-direction: column;
117
- .card-image-wrap {
118
- width: 100%;
119
- .card-image {
120
- // max-height: 107px;
121
- width: fit-content;
122
- margin: 0 auto 7px;
123
- }
124
- }
9
+ // display: flex;
125
10
 
126
- .card-title {
11
+ .card-image-wrap {
127
12
  margin-bottom: 4px;
128
- }
129
-
130
- .card-text {
131
- margin-bottom: 7px;
132
- }
133
- .card-btn-wrap {
134
- display: flex;
135
- flex-direction: column;
136
- }
137
-
138
- .card-second-btn {
139
- margin-top: 8px;
13
+ width: 100%;
140
14
  }
141
15
  }
142
- .card-margin-bottom {
143
- margin-bottom: 10px;
144
- }
145
- }
16
+ }
17
+
146
18
  }
147
19
 
148
- .outsideM {
20
+ .newline {
149
21
  .group-wrap {
150
- padding: 0 15px;
151
- width: 100%;
152
- .one-card {
153
- margin-top: 35px;
154
- position: relative;
155
- padding: 30px 10px 20px 36px;
156
- .card-image-wrap {
157
- position: absolute;
158
- left: 18px;
159
- top: 0;
160
- transform: translateY(-50%);
161
- }
162
- .card-content-wrap {
163
- .card-title {
164
- margin-bottom: 4px;
165
- text-align: left !important;
166
- }
167
- .card-text {
168
- margin-bottom: 12px;
169
- text-align: left !important;
170
- }
171
- .card-btn-wrap {
172
- display: flex;
173
- .card-first-btn {
174
- margin-right: 12px;
175
- }
176
- }
177
- }
178
- }
22
+ flex-wrap: wrap;
179
23
  }
180
24
  }
181
25
 
182
- .centerM {
26
+ .tile {
183
27
  .group-wrap {
184
- position: relative;
185
- width: 100%;
186
- &::before {
187
- content: '';
188
- position: absolute;
189
- width: 1px;
190
- height: 100%;
191
- border-right: 1px dashed #D2D9E5;
192
- left: 50%;
193
- transform: translateX(-50%);
194
- }
28
+ // overflow-x: scroll;
29
+ overflow-x: auto;
30
+ flex-wrap: nowrap;
31
+ scroll-snap-type: x;
195
32
  .one-card {
196
- width: calc((100% - 1px)/2);
197
- position: relative;
198
- padding: 0 14px 16px;
199
- &::before {
200
- content: '';
201
- position: absolute;
202
- border-radius: 50%;
203
- background: #2F54EB;
204
- width: 10px;
205
- height: 10px;
206
- z-index: 10;
207
- border: 2px solid #CCE3FF;
208
- }
209
- // &::before {
210
- // opacity: 0.2;
211
- // width: 10px;
212
- // height: 10px;
213
- // }
214
- &:nth-of-type(2n-1) {
215
- left: 0;
216
- &::before {
217
- right: -5px;
218
- top: 5px;
219
- }
220
- // &::after {
221
- // right: -3px;
222
- // top: 7px;
223
- // }
224
- .card-content-wrap {
225
- display: flex;
226
- flex-direction: column;
227
- align-items: flex-end;
228
- .card-title, .card-text {
229
- text-align: right !important;
230
- }
231
- .image-subtext-wrap {
232
- flex-direction: row-reverse;
233
- .card-image-wrap {
234
- margin-left: 8px;
235
- }
236
- // .card-text {
237
- // .m-meta-text {
238
- // text-align: right !important;
239
- // }
240
- // }
241
- }
242
- .card-btn-wrap {
243
- display: flex;
244
- flex-direction: column;
245
- align-items: flex-end;
246
- }
247
- }
248
- }
249
- &:nth-of-type(2n) {
250
- left: 50%;
251
- &::before {
252
- left: -5px;
253
- top: 5px;
254
- }
255
- // &::after {
256
- // left: -3px;
257
- // top: 7px;
258
- // }
259
- .card-content-wrap {
260
- .card-title, .card-text {
261
- text-align: left !important;
262
- }
263
- .image-subtext-wrap {
264
- .card-image-wrap {
265
- margin-right: 8px;
266
- }
267
- // .card-text {
268
- // .m-meta-text {
269
- // text-align: left !important;
270
- // }
271
- // }
272
- }
273
- }
274
- }
275
- .card-content-wrap {
276
- .card-title {
277
- margin-bottom: 10px;
278
- }
279
- .image-subtext-wrap {
280
- display: flex;
281
- margin-bottom: 20px;
282
- align-items: center;
283
- }
284
- .card-btn-wrap {
285
- .card-second-btn {
286
- margin-top: 12px;
287
- }
288
- }
289
- }
33
+ scroll-snap-align: end;
34
+ min-width: 30%;
290
35
  }
291
36
  }
292
- }
37
+ }
package/lib/composite-comp/dito/components/Recommend/defaultJSON.js CHANGED
@@ -279,14 +279,8 @@ var getDefaultJSON = function getDefaultJSON() {
279
279
  }
280
280
  },
281
281
  customize: {
282
- layout: {
283
- pcLayout: 'layout1',
284
- h5Layout: 'layout1'
285
- },
286
- align: 'left',
287
- pcRowNum: 6,
288
- pcMaxRowNum: 6,
289
- pcMinRowNum: 5
282
+ layout: 'left',
283
+ align: 'left'
290
284
  },
291
285
  background: {
292
286
  opacity: 100,
package/lib/composite-comp/dito/components/Recommend/mobile/index.js CHANGED
@@ -227,6 +227,10 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
227
227
  };
228
228
 
229
229
  var LAYOUT_IMAGE_SIZE = {
230
+ left: {
231
+ w: '100%',
232
+ h: 165
233
+ },
230
234
  layout1: {
231
235
  w: '100%',
232
236
  h: 164
@@ -412,8 +416,10 @@ function (_super) {
412
416
  };
413
417
 
414
418
  _this.resetLayout = function () {
415
- var layout = _this.props.panelProps.customize.layout.h5Layout;
419
+ var layout = _this.props.panelProps.customize.layout.h5Layout || _this.props.panelProps.customize.layout; // 后面删除
420
+
416
421
  var LAYOUT_COLUMN = {
422
+ left: 2,
417
423
  layout1: 2,
418
424
  layout2: 1,
419
425
  layout3: 3
@@ -537,7 +543,7 @@ function (_super) {
537
543
  hideTabs: hideTabs
538
544
  });
539
545
  });
540
- var curLayout = panelProps.customize.layout.h5Layout;
546
+ var curLayout = panelProps.customize.layout.h5Layout || panelProps.customize.layout; // 后面删除
541
547
 
542
548
  if (curLayout !== this.preLayout) {
543
549
  this.resetLayout();
@@ -559,7 +565,7 @@ function (_super) {
559
565
  var bgStyle = this.getBackgroundStyle();
560
566
  var products = this.state["products" + tabIndex] || [];
561
567
  var isDivide = groupSource.length <= 3;
562
- var layout = panelProps.customize.layout.h5Layout;
568
+ var layout = panelProps.customize.layout.h5Layout || panelProps.customize.layout; // 后面删除
563
569
 
564
570
  var _seeAll = (0, _commonUtil.ensure)(function () {
565
571
  return groupSource[tabIndex].seeAll;
@@ -611,27 +617,7 @@ function (_super) {
611
617
  transform: "translateX(" + tabLeft + "px)",
612
618
  background: this.getTabBarActiveColor(panelProps)
613
619
  }
614
- })), ['layout1', 'layout2', 'layout3'].includes(layout) ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
615
- key: "macyContainer",
616
- className: "macyContainer"
617
- }, products.map(function (item) {
618
- return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
619
- key: item.productId,
620
- data: item,
621
- fixHeight: layout === 'layout3',
622
- imgHeight: imgHeight,
623
- imgWidth: imgWidth,
624
- layout: layout === 'layout2' ? 'horizontal' : 'vertical',
625
- onItemClick: function onItemClick() {
626
- return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
627
- },
628
- panelProps: panelProps.content,
629
- showProgress: false
630
- });
631
- })), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
632
- className: "btnSeeAll",
633
- data: _seeAll
634
- })) : /*#__PURE__*/_react["default"].createElement("div", {
620
+ })), ['layout4', 'layout5'].includes(layout) ? /*#__PURE__*/_react["default"].createElement("div", {
635
621
  key: "scrollContainer",
636
622
  className: (0, _classnames["default"])('scrollContainer', {
637
623
  pl_100: layout === 'layout5'
@@ -654,6 +640,26 @@ function (_super) {
654
640
  }), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
655
641
  className: "btnSeeAll",
656
642
  data: _seeAll
643
+ })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
644
+ key: "macyContainer",
645
+ className: "macyContainer"
646
+ }, products.map(function (item) {
647
+ return /*#__PURE__*/_react["default"].createElement(_ProductItem["default"], {
648
+ key: item.productId,
649
+ data: item,
650
+ fixHeight: layout === 'layout3',
651
+ imgHeight: imgHeight,
652
+ imgWidth: imgWidth,
653
+ layout: layout === 'layout2' ? 'horizontal' : 'vertical',
654
+ onItemClick: function onItemClick() {
655
+ return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
656
+ },
657
+ panelProps: panelProps.content,
658
+ showProgress: false
659
+ });
660
+ })), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
661
+ className: "btnSeeAll",
662
+ data: _seeAll
657
663
  })));
658
664
  };
659
665
 
package/lib/meta-comp/components/Image/index.js CHANGED
@@ -161,7 +161,10 @@ function (_super) {
161
161
 
162
162
  if (window.magicDesign.isShop && (srcImg === null || srcImg === void 0 ? void 0 : srcImg.includes('ecommerce/static'))) {
163
163
  srcImg = srcImg.replace('ecommerce/static', 'static');
164
- }
164
+ } // if (!srcImg) {
165
+ // srcImg = defaultImg;
166
+ // }
167
+
165
168
 
166
169
  return /*#__PURE__*/_react["default"].createElement("div", {
167
170
  className: (0, _classnames["default"])('m-meta-image', {
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.39",
4
+ "version": "0.0.41",
5
5
  "description": "Magic Design",
6
6
  "license": "MIT",
7
7
  "module": "es/index.js",