@fonixtree/magic-design 0.1.17 → 0.1.19

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 (35) hide show
  1. package/es/common/Iconfont/index.js +4 -2
  2. package/es/common/ImageModal/index.js +12 -6
  3. package/es/common/ImageModal/utils.js +77 -6
  4. package/es/composite-comp/bol/components/Banner/mobile/index.less +52 -78
  5. package/es/composite-comp/bol/components/Carousel/mobile/index.less +81 -100
  6. package/es/composite-comp/bol/components/ImageGallery/mobile/index.less +15 -22
  7. package/es/composite-comp/bol/components/ImageText/mobile/index.less +233 -292
  8. package/es/composite-comp/bol/components/Video/mobile/Layout1/index.js +1 -1
  9. package/es/composite-comp/bol/components/Video/mobile/Layout1/index.less +23 -27
  10. package/es/composite-comp/bol/components/Video/mobile/Layout2/index.less +38 -45
  11. package/es/composite-comp/bol/components/Video/mobile/Layout3/index.less +41 -50
  12. package/es/composite-comp/bol/components/Video/mobile/index.less +2 -3
  13. package/es/composite-comp/bol/components/Wallet/mobile/index.less +27 -40
  14. package/es/composite-comp/dito/components/FlashDeal/mobile/index.less +83 -97
  15. package/es/composite-comp/dito/components/MobileNavigation/mobile/index.less +18 -35
  16. package/es/composite-comp/dito/components/Recommend/mobile/index.less +73 -86
  17. package/es/composite-comp/dito/components/SearchBar/mobile/index.less +43 -49
  18. package/lib/common/Iconfont/index.js +4 -2
  19. package/lib/common/ImageModal/index.js +12 -6
  20. package/lib/common/ImageModal/utils.js +77 -6
  21. package/lib/composite-comp/bol/components/Banner/mobile/index.less +52 -78
  22. package/lib/composite-comp/bol/components/Carousel/mobile/index.less +81 -100
  23. package/lib/composite-comp/bol/components/ImageGallery/mobile/index.less +15 -22
  24. package/lib/composite-comp/bol/components/ImageText/mobile/index.less +233 -292
  25. package/lib/composite-comp/bol/components/Video/mobile/Layout1/index.js +1 -1
  26. package/lib/composite-comp/bol/components/Video/mobile/Layout1/index.less +23 -27
  27. package/lib/composite-comp/bol/components/Video/mobile/Layout2/index.less +38 -45
  28. package/lib/composite-comp/bol/components/Video/mobile/Layout3/index.less +41 -50
  29. package/lib/composite-comp/bol/components/Video/mobile/index.less +2 -3
  30. package/lib/composite-comp/bol/components/Wallet/mobile/index.less +27 -40
  31. package/lib/composite-comp/dito/components/FlashDeal/mobile/index.less +83 -97
  32. package/lib/composite-comp/dito/components/MobileNavigation/mobile/index.less +18 -35
  33. package/lib/composite-comp/dito/components/Recommend/mobile/index.less +73 -86
  34. package/lib/composite-comp/dito/components/SearchBar/mobile/index.less +43 -49
  35. package/package.json +1 -1
@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
11
11
 
12
12
  var _react = _interopRequireWildcard(require("react"));
13
13
 
14
+ var _commonUtil = require("../../utils/commonUtil");
15
+
14
16
  require("./index.less");
15
17
 
16
18
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -122,10 +124,10 @@ function (_super) {
122
124
 
123
125
  return /*#__PURE__*/_react["default"].createElement("span", _extends({
124
126
  className: (0, _classnames["default"])('icon_container', className),
125
- style: {
127
+ style: (0, _commonUtil.pxToRem)({
126
128
  fontSize: _size,
127
129
  color: color
128
- }
130
+ })
129
131
  }, rest), svg ? /*#__PURE__*/_react["default"].createElement("svg", {
130
132
  "aria-hidden": "true",
131
133
  className: "icon"
@@ -491,7 +491,7 @@ function ImageModal(_a) {
491
491
 
492
492
  var handleUpload = function handleUpload(file) {
493
493
  return __awaiter(_this, void 0, void 0, function () {
494
- var result, form, result;
494
+ var config, result, form, result;
495
495
  return __generator(this, function (_a) {
496
496
  switch (_a.label) {
497
497
  case 0:
@@ -510,9 +510,15 @@ function ImageModal(_a) {
510
510
  }
511
511
 
512
512
  console.log('file: ', file);
513
- if (!(file.size > 5 * 1024 * 1024)) return [3
513
+ return [4
514
+ /*yield*/
515
+ , (0, _utils.getUploadParamCodeConfig)()];
516
+
517
+ case 1:
518
+ config = _a.sent();
519
+ if (!(file.size > config.maxSize)) return [3
514
520
  /*break*/
515
- , 2];
521
+ , 3];
516
522
  setSpinning(true);
517
523
  setProcess(0);
518
524
  return [4
@@ -525,7 +531,7 @@ function ImageModal(_a) {
525
531
  setProcess(process);
526
532
  })];
527
533
 
528
- case 1:
534
+ case 2:
529
535
  result = _a.sent();
530
536
  setProcess(null);
531
537
  setSpinning(false);
@@ -533,7 +539,7 @@ function ImageModal(_a) {
533
539
  /*return*/
534
540
  , result];
535
541
 
536
- case 2:
542
+ case 3:
537
543
  form = new FormData();
538
544
  form.append('file', file); // 文件对象
539
545
 
@@ -547,7 +553,7 @@ function ImageModal(_a) {
547
553
  /*yield*/
548
554
  , onUpload(form)];
549
555
 
550
- case 3:
556
+ case 4:
551
557
  result = _a.sent();
552
558
  return [2
553
559
  /*return*/
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.calFileMd5Fn = calFileMd5Fn;
7
7
  exports.checkFileFn = checkFileFn;
8
8
  exports.fileUpload = exports.chunksUpload = void 0;
9
+ exports.getUploadParamCodeConfig = getUploadParamCodeConfig;
9
10
  exports.sliceFileUploadFn = sliceFileUploadFn;
10
11
  exports.sliceFn = sliceFn;
11
12
  exports.tellBackendMergeFn = tellBackendMergeFn;
@@ -230,6 +231,71 @@ function sliceFileUploadFn(formData) {
230
231
  });
231
232
  });
232
233
  }
234
+ /** 获取上传分包配置 */
235
+
236
+
237
+ function getUploadParamCodeConfig() {
238
+ return __awaiter(this, void 0, void 0, function () {
239
+ var paramConfig, res, findMaxSize, findChunkSize, error_1;
240
+ return __generator(this, function (_a) {
241
+ switch (_a.label) {
242
+ case 0:
243
+ _a.trys.push([0, 2,, 3]);
244
+
245
+ if (window._videoParamConfig) {
246
+ return [2
247
+ /*return*/
248
+ , window._videoParamConfig];
249
+ }
250
+
251
+ paramConfig = {};
252
+ return [4
253
+ /*yield*/
254
+ , (0, _commonUtil.commonFetch)('/designer/v1/params', {
255
+ paramCodes: ['designer.upload.file.maxSize', 'designer.upload.file.chunkSize'].join(',')
256
+ })];
257
+
258
+ case 1:
259
+ res = _a.sent();
260
+ findMaxSize = res.find(function (item) {
261
+ return item.paramCode == 'designer.upload.file.maxSize';
262
+ });
263
+
264
+ if (findMaxSize) {
265
+ paramConfig.maxSize = Number(findMaxSize.paramValue);
266
+ }
267
+
268
+ findChunkSize = res.find(function (item) {
269
+ return item.paramCode == 'designer.upload.file.chunkSize';
270
+ });
271
+
272
+ if (findChunkSize) {
273
+ paramConfig.chunkSize = Number(findChunkSize.paramValue);
274
+ }
275
+
276
+ window._videoParamConfig = paramConfig;
277
+ return [2
278
+ /*return*/
279
+ , window._videoParamConfig];
280
+
281
+ case 2:
282
+ error_1 = _a.sent();
283
+ console.error('获取上传配置失败: ', error_1);
284
+ return [2
285
+ /*return*/
286
+ , {
287
+ maxSize: 50 * 1024 * 1024,
288
+ chunkSize: 20 * 1024 * 1024
289
+ }];
290
+
291
+ case 3:
292
+ return [2
293
+ /*return*/
294
+ ];
295
+ }
296
+ });
297
+ });
298
+ }
233
299
  /**
234
300
  * 告知后端要去合并前端上传的文件了
235
301
  * */
@@ -312,7 +378,7 @@ var fileUpload = function fileUpload(_a, cb) {
312
378
  fileMd5 = _a.fileMd5,
313
379
  chunks = _a.chunks;
314
380
  return __awaiter(void 0, void 0, void 0, function () {
315
- var count, requestListFn, res, error_1;
381
+ var count, requestListFn, res, error_2;
316
382
  return __generator(this, function (_b) {
317
383
  switch (_b.label) {
318
384
  case 0:
@@ -372,8 +438,8 @@ var fileUpload = function fileUpload(_a, cb) {
372
438
  , 5];
373
439
 
374
440
  case 4:
375
- error_1 = _b.sent();
376
- console.log(error_1);
441
+ error_2 = _b.sent();
442
+ console.log(error_2);
377
443
  return [3
378
444
  /*break*/
379
445
  , 5];
@@ -508,13 +574,18 @@ var chunksUpload = function chunksUpload(_a, cb) {
508
574
  return __generator(this, function (_b) {
509
575
  switch (_b.label) {
510
576
  case 0:
511
- CHUNK_SIZE = 5 * 1024 * 1024;
577
+ return [4
578
+ /*yield*/
579
+ , getUploadParamCodeConfig()];
580
+
581
+ case 1:
582
+ CHUNK_SIZE = _b.sent().chunkSize;
512
583
  chunks = sliceFn(file, CHUNK_SIZE);
513
584
  return [4
514
585
  /*yield*/
515
586
  , calFileMd5Fn(chunks)];
516
587
 
517
- case 1:
588
+ case 2:
518
589
  fileMd5 = _b.sent();
519
590
  return [4
520
591
  /*yield*/
@@ -523,7 +594,7 @@ var chunksUpload = function chunksUpload(_a, cb) {
523
594
  contentCatgId: contentCatgId
524
595
  }, chunks, file.name, cb)];
525
596
 
526
- case 2:
597
+ case 3:
527
598
  _b.sent(); // 然后执行文件检查操作
528
599
 
529
600
 
@@ -1,80 +1,54 @@
1
1
  .m-banner-mobile {
2
2
  position: relative;
3
- // .turnPage {
4
- // position: absolute;
5
- // top: 50%;
6
- // transform: translateY(-50%);
7
- // z-index: 3;
8
- // cursor: pointer;
9
- // }
10
- // .leftBtn {
11
- // left: 20px;
12
- // }
13
- // .rightBtn {
14
- // right: 20px;
15
- // }
16
-
17
- .cylon-carousel {
18
- .slick-track {
19
- display: flex;
20
- align-items: center;
21
- }
22
- }
23
-
24
- .carouselItem {
25
- // height: 386px;
26
- position: relative;
27
- display: flex;
28
-
29
- .carouseContent {
30
- padding: 80px 28px 0;
31
- position: absolute;
32
- z-index: 2;
33
- display: flex;
34
- flex-direction: column;
35
- margin-bottom: auto;
36
- }
37
-
38
- .title {
39
- margin-bottom: 8px;
40
- }
41
-
42
- .sub-title {
43
- margin-bottom: 20px;
44
- }
45
-
46
- .btn-wrap {
47
- display: flex;
48
- align-items: center;
49
- justify-content: flex-start;
50
-
51
- .btn {
52
- margin-right: 12px;
53
- }
54
- }
55
- }
56
-
57
- .swiper-ban {
58
- position: absolute;
59
- width: 100%;
60
- bottom: 10px;
61
- display: flex;
62
- align-items: center;
63
- justify-content: center;
64
-
65
- .ban {
66
- font-size: 16px;
67
- width: 1.5em;
68
- height: 0.3em;
69
- background: #FFF;
70
- cursor: inherit;
71
- margin-right: 0.3em;
72
- transition: all .5s;
73
-
74
- &.active {
75
- width: 1.5em;
76
- opacity: 1;
77
- }
78
- }
79
- }
80
- }
3
+ }
4
+ .m-banner-mobile .cylon-carousel .slick-track {
5
+ display: flex;
6
+ align-items: center;
7
+ }
8
+ .m-banner-mobile .carouselItem {
9
+ position: relative;
10
+ display: flex;
11
+ }
12
+ .m-banner-mobile .carouselItem .carouseContent {
13
+ padding: 1.6rem 0.56rem 0;
14
+ position: absolute;
15
+ z-index: 2;
16
+ display: flex;
17
+ flex-direction: column;
18
+ margin-bottom: auto;
19
+ }
20
+ .m-banner-mobile .carouselItem .title {
21
+ margin-bottom: 0.16rem;
22
+ }
23
+ .m-banner-mobile .carouselItem .sub-title {
24
+ margin-bottom: 0.4rem;
25
+ }
26
+ .m-banner-mobile .carouselItem .btn-wrap {
27
+ display: flex;
28
+ align-items: center;
29
+ justify-content: flex-start;
30
+ }
31
+ .m-banner-mobile .carouselItem .btn-wrap .btn {
32
+ margin-right: 0.24rem;
33
+ }
34
+ .m-banner-mobile .swiper-ban {
35
+ position: absolute;
36
+ width: 100%;
37
+ bottom: 0.2rem;
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ }
42
+ .m-banner-mobile .swiper-ban .ban {
43
+ font-size: 0.32rem;
44
+ width: 1.5em;
45
+ height: 0.3em;
46
+ background: #FFF;
47
+ cursor: inherit;
48
+ margin-right: 0.3em;
49
+ transition: all 0.5s;
50
+ }
51
+ .m-banner-mobile .swiper-ban .ban.active {
52
+ width: 1.5em;
53
+ opacity: 1;
54
+ }
@@ -1,103 +1,84 @@
1
1
  .m-carousel-mobile {
2
2
  position: relative;
3
3
  width: 100%;
4
-
5
- .content {
6
- display: flex;
7
- margin: 0 auto;
8
- }
9
-
10
- .slider-wrap {
11
- width: 100%;
12
- margin: 0 auto;
13
- line-height: 1;
14
-
15
- .slick-list {
16
- // margin-left: -11px;
17
- // margin-right: -11px;
18
- padding: 0;
19
-
20
- &:hover {
21
- padding-top: 100px;
22
- margin-top: -100px;
23
- padding-bottom: 100px;
24
- margin-bottom: -100px;
25
- }
26
-
27
- .slick-track {
28
- display: flex;
29
- align-items: center;
30
- gap: 12px;
31
- }
32
- }
33
-
34
- .img-wrap {
35
- .img {
36
- width: fit-content;
37
- height: fit-content;
38
- display: block;
39
- margin: 0 auto;
40
- }
41
-
42
- .title {
43
- display: flex;
44
- justify-content: center;
45
- margin-top: 12px;
46
- }
47
-
48
- .text {
49
- display: flex;
50
- justify-content: center;
51
- margin-top: 6px;
52
- }
53
-
54
- .tags {
55
- margin-top: 8px;
56
- margin-bottom: 12px;
57
- display: flex;
58
- flex-direction: row;
59
- align-items: center;
60
- justify-content: center;
61
-
62
- >div {
63
- margin-right: 8px;
64
-
65
- &:last-child {
66
- margin-right: 0;
67
- }
68
- }
69
- }
70
- }
71
- }
72
-
73
- .swiper-ban {
74
- position: absolute;
75
- width: 100%;
76
- bottom: 6px;
77
- display: flex;
78
- align-items: center;
79
- justify-content: center;
80
-
81
- .ban {
82
- font-size: 8px;
83
- width: 1em;
84
- height: 1em;
85
- border-radius: 50%;
86
- background: #FFF;
87
- cursor: inherit;
88
- margin-right: 10px;
89
- transition: all .5s;
90
-
91
- &:last-child {
92
- margin-right: 0;
93
- }
94
-
95
- &.active {
96
- width: 2em;
97
- height: 1em;
98
- border-radius: 100px;
99
- opacity: 1;
100
- }
101
- }
102
- }
103
- }
4
+ }
5
+ .m-carousel-mobile .content {
6
+ display: flex;
7
+ margin: 0 auto;
8
+ }
9
+ .m-carousel-mobile .slider-wrap {
10
+ width: 100%;
11
+ margin: 0 auto;
12
+ line-height: 1;
13
+ }
14
+ .m-carousel-mobile .slider-wrap .slick-list {
15
+ padding: 0;
16
+ }
17
+ .m-carousel-mobile .slider-wrap .slick-list:hover {
18
+ padding-top: 2rem;
19
+ margin-top: -2rem;
20
+ padding-bottom: 2rem;
21
+ margin-bottom: -2rem;
22
+ }
23
+ .m-carousel-mobile .slider-wrap .slick-list .slick-track {
24
+ display: flex;
25
+ align-items: center;
26
+ gap: 0.24rem;
27
+ }
28
+ .m-carousel-mobile .slider-wrap .img-wrap .img {
29
+ width: fit-content;
30
+ height: fit-content;
31
+ display: block;
32
+ margin: 0 auto;
33
+ }
34
+ .m-carousel-mobile .slider-wrap .img-wrap .title {
35
+ display: flex;
36
+ justify-content: center;
37
+ margin-top: 0.24rem;
38
+ }
39
+ .m-carousel-mobile .slider-wrap .img-wrap .text {
40
+ display: flex;
41
+ justify-content: center;
42
+ margin-top: 0.12rem;
43
+ }
44
+ .m-carousel-mobile .slider-wrap .img-wrap .tags {
45
+ margin-top: 0.16rem;
46
+ margin-bottom: 0.24rem;
47
+ display: flex;
48
+ flex-direction: row;
49
+ align-items: center;
50
+ justify-content: center;
51
+ }
52
+ .m-carousel-mobile .slider-wrap .img-wrap .tags > div {
53
+ margin-right: 0.16rem;
54
+ }
55
+ .m-carousel-mobile .slider-wrap .img-wrap .tags > div:last-child {
56
+ margin-right: 0;
57
+ }
58
+ .m-carousel-mobile .swiper-ban {
59
+ position: absolute;
60
+ width: 100%;
61
+ bottom: 0.12rem;
62
+ display: flex;
63
+ align-items: center;
64
+ justify-content: center;
65
+ }
66
+ .m-carousel-mobile .swiper-ban .ban {
67
+ font-size: 0.16rem;
68
+ width: 1em;
69
+ height: 1em;
70
+ border-radius: 50%;
71
+ background: #FFF;
72
+ cursor: inherit;
73
+ margin-right: 0.2rem;
74
+ transition: all 0.5s;
75
+ }
76
+ .m-carousel-mobile .swiper-ban .ban:last-child {
77
+ margin-right: 0;
78
+ }
79
+ .m-carousel-mobile .swiper-ban .ban.active {
80
+ width: 2em;
81
+ height: 1em;
82
+ border-radius: 2rem;
83
+ opacity: 1;
84
+ }
@@ -1,22 +1,15 @@
1
- .m-image-gallery-mobile {
2
- .content {
3
- .line {
4
- margin-bottom: 12px;
5
-
6
- &.isHorizontal {
7
- display: flex;
8
- justify-content: flex-start;
9
- }
10
-
11
- &:last-child {
12
- margin-bottom: 0;
13
- }
14
-
15
- .img-wrap {
16
- display: flex;
17
- align-items: center;
18
- justify-content: center;
19
- }
20
- }
21
- }
22
- }
1
+ .m-image-gallery-mobile .content .line {
2
+ margin-bottom: 0.24rem;
3
+ }
4
+ .m-image-gallery-mobile .content .line.isHorizontal {
5
+ display: flex;
6
+ justify-content: flex-start;
7
+ }
8
+ .m-image-gallery-mobile .content .line:last-child {
9
+ margin-bottom: 0;
10
+ }
11
+ .m-image-gallery-mobile .content .line .img-wrap {
12
+ display: flex;
13
+ align-items: center;
14
+ justify-content: center;
15
+ }