@fonixtree/magic-design 0.0.116 → 0.0.119

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 (45) hide show
  1. package/es/assets/less/datepicker.less +4 -2
  2. package/es/assets/less/form.less +3 -2
  3. package/es/composite-comp/bol/components/Banner/defaultJSON.js +2 -2
  4. package/es/composite-comp/bol/components/Banner/mobile/index.js +7 -8
  5. package/es/composite-comp/bol/components/Banner/mobile/index.less +48 -71
  6. package/es/composite-comp/bol/components/Banner/pc/index.js +7 -8
  7. package/es/composite-comp/bol/components/Banner/pc/index.less +2 -2
  8. package/es/composite-comp/bol/components/Carousel/mobile/index.less +76 -92
  9. package/es/composite-comp/bol/components/ImageGallery/mobile/index.less +15 -22
  10. package/es/composite-comp/bol/components/ImageText/mobile/index.less +232 -291
  11. package/es/composite-comp/bol/components/Video/mobile/Layout1/index.less +22 -26
  12. package/es/composite-comp/bol/components/Video/mobile/Layout2/index.less +37 -44
  13. package/es/composite-comp/bol/components/Video/mobile/Layout3/index.less +29 -36
  14. package/es/composite-comp/bol/components/Video/mobile/index.less +2 -3
  15. package/es/composite-comp/bol/components/Wallet/mobile/index.less +27 -40
  16. package/es/composite-comp/bol/config-panels/BannerConfig/BannerConfigSetting/index.js +11 -26
  17. package/es/composite-comp/bol/second-config-panels/BannerSecondConfig/index.js +7 -8
  18. package/es/composite-comp/dito/components/FlashDeal/mobile/index.less +83 -97
  19. package/es/composite-comp/dito/components/MobileNavigation/mobile/index.less +20 -34
  20. package/es/composite-comp/dito/components/Recommend/mobile/index.less +73 -86
  21. package/es/composite-comp/dito/components/SearchBar/mobile/index.less +40 -44
  22. package/es/meta-comp/components/Image/index.less +1 -1
  23. package/lib/assets/less/datepicker.less +4 -2
  24. package/lib/assets/less/form.less +3 -2
  25. package/lib/composite-comp/bol/components/Banner/defaultJSON.js +2 -2
  26. package/lib/composite-comp/bol/components/Banner/mobile/index.js +7 -8
  27. package/lib/composite-comp/bol/components/Banner/mobile/index.less +48 -71
  28. package/lib/composite-comp/bol/components/Banner/pc/index.js +7 -8
  29. package/lib/composite-comp/bol/components/Banner/pc/index.less +2 -2
  30. package/lib/composite-comp/bol/components/Carousel/mobile/index.less +76 -92
  31. package/lib/composite-comp/bol/components/ImageGallery/mobile/index.less +15 -22
  32. package/lib/composite-comp/bol/components/ImageText/mobile/index.less +232 -291
  33. package/lib/composite-comp/bol/components/Video/mobile/Layout1/index.less +22 -26
  34. package/lib/composite-comp/bol/components/Video/mobile/Layout2/index.less +37 -44
  35. package/lib/composite-comp/bol/components/Video/mobile/Layout3/index.less +29 -36
  36. package/lib/composite-comp/bol/components/Video/mobile/index.less +2 -3
  37. package/lib/composite-comp/bol/components/Wallet/mobile/index.less +27 -40
  38. package/lib/composite-comp/bol/config-panels/BannerConfig/BannerConfigSetting/index.js +11 -26
  39. package/lib/composite-comp/bol/second-config-panels/BannerSecondConfig/index.js +7 -8
  40. package/lib/composite-comp/dito/components/FlashDeal/mobile/index.less +83 -97
  41. package/lib/composite-comp/dito/components/MobileNavigation/mobile/index.less +20 -34
  42. package/lib/composite-comp/dito/components/Recommend/mobile/index.less +73 -86
  43. package/lib/composite-comp/dito/components/SearchBar/mobile/index.less +40 -44
  44. package/lib/meta-comp/components/Image/index.less +1 -1
  45. package/package.json +2 -1
@@ -1,39 +1,32 @@
1
1
  .video-layout3-wrap {
2
2
  display: flex;
3
3
  flex-direction: column;
4
-
5
- .video-layout3-item-con {
6
- display: flex;
7
- flex-direction: column;
8
- margin-bottom: 10px;
9
-
10
- &:last-child{
11
- margin-bottom: 0;
12
- }
13
- }
14
-
15
- .video-item-wrap {
16
- height: 212px;
17
- position: relative;
18
-
19
-
20
- &:last-child {
21
- margin-bottom: 0;
22
- }
23
-
24
- .play-btn {
25
- position: absolute;
26
- top: 50%;
27
- left: 50%;
28
- transform: translate(-50%, -50%);
29
- width: 65px;
30
- height: 65px;
31
- z-index: 1;
32
-
33
- img {
34
- width: 100%;
35
- height: 100%;
36
- }
37
- }
38
- }
39
- }
4
+ }
5
+ .video-layout3-wrap .video-layout3-item-con {
6
+ display: flex;
7
+ flex-direction: column;
8
+ margin-bottom: 1.333vw;
9
+ }
10
+ .video-layout3-wrap .video-layout3-item-con:last-child {
11
+ margin-bottom: 0;
12
+ }
13
+ .video-layout3-wrap .video-item-wrap {
14
+ height: 28.267vw;
15
+ position: relative;
16
+ }
17
+ .video-layout3-wrap .video-item-wrap:last-child {
18
+ margin-bottom: 0;
19
+ }
20
+ .video-layout3-wrap .video-item-wrap .play-btn {
21
+ position: absolute;
22
+ top: 50%;
23
+ left: 50%;
24
+ transform: translate(-50%, -50%);
25
+ width: 8.667vw;
26
+ height: 8.667vw;
27
+ z-index: 1;
28
+ }
29
+ .video-layout3-wrap .video-item-wrap .play-btn img {
30
+ width: 100%;
31
+ height: 100%;
32
+ }
@@ -1,4 +1,3 @@
1
1
  .m-video-mobile {
2
- position: relative;
3
-
4
- }
2
+ position: relative;
3
+ }
@@ -1,40 +1,27 @@
1
- .m-Wallet-mobile {
2
-
3
- .headline {
4
- margin-bottom: 7px;
5
- }
6
-
7
- .content {
8
- display: flex;
9
- flex-wrap: wrap;
10
-
11
- &.column_3 {
12
- .item-wrap {
13
- .title {
14
- top: 13%;
15
- }
16
-
17
- .amount {
18
- bottom: 13%;
19
- }
20
- }
21
- }
22
-
23
- .item-wrap {
24
- display: flex;
25
- align-items: center;
26
- justify-content: center;
27
- position: relative;
28
- border-radius: 10px;
29
-
30
- .image {
31
- border-radius: 10px;
32
- overflow: hidden;
33
- }
34
-
35
- .text-content {
36
- position: absolute;
37
- }
38
- }
39
- }
40
- }
1
+ .m-Wallet-mobile .headline {
2
+ margin-bottom: 0.933vw;
3
+ }
4
+ .m-Wallet-mobile .content {
5
+ display: flex;
6
+ flex-wrap: wrap;
7
+ }
8
+ .m-Wallet-mobile .content.column_3 .item-wrap .title {
9
+ top: 13%;
10
+ }
11
+ .m-Wallet-mobile .content.column_3 .item-wrap .amount {
12
+ bottom: 13%;
13
+ }
14
+ .m-Wallet-mobile .content .item-wrap {
15
+ display: flex;
16
+ align-items: center;
17
+ justify-content: center;
18
+ position: relative;
19
+ border-radius: 1.333vw;
20
+ }
21
+ .m-Wallet-mobile .content .item-wrap .image {
22
+ border-radius: 1.333vw;
23
+ overflow: hidden;
24
+ }
25
+ .m-Wallet-mobile .content .item-wrap .text-content {
26
+ position: absolute;
27
+ }
@@ -13,8 +13,6 @@ require("./index.less");
13
13
 
14
14
  var _coreUtil = require("../../../../../utils/coreUtil");
15
15
 
16
- var _InputNumber = _interopRequireDefault(require("../../../../../common/InputNumber"));
17
-
18
16
  var _locale = require("../../../../../locale");
19
17
 
20
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -59,20 +57,17 @@ function (_super) {
59
57
  _this.setState({});
60
58
  };
61
59
 
62
- _this.onChangeHeight = function (v) {
63
- var setting = _this.props.setting;
64
-
65
- if ((0, _coreUtil.isPc)()) {
66
- setting.pcHeight = v;
67
- } else {
68
- setting.mobileHeight = v;
69
- }
70
-
71
- _this.reRender();
72
- };
73
-
74
60
  return _this;
75
- }
61
+ } // onChangeHeight = v => {
62
+ // const { setting } = this.props;
63
+ // if (isPc()) {
64
+ // setting.pcHeight = v;
65
+ // } else {
66
+ // setting.mobileHeight = v;
67
+ // }
68
+ // this.reRender();
69
+ // }
70
+
76
71
 
77
72
  BannerConfigSetting.prototype.render = function () {
78
73
  var _this = this;
@@ -161,17 +156,7 @@ function (_super) {
161
156
 
162
157
  return /*#__PURE__*/_react["default"].createElement("div", {
163
158
  className: "banner_setting"
164
- }, /*#__PURE__*/_react["default"].createElement(_common.Field, {
165
- layout: "horizontal",
166
- title: (0, _locale.i18n)('BANNER_HEIGHT')
167
- }, /*#__PURE__*/_react["default"].createElement(_InputNumber["default"], {
168
- max: 1000,
169
- onChange: function onChange(v) {
170
- return _this.onChangeHeight(v);
171
- },
172
- unit: "px",
173
- value: setting[(0, _coreUtil.isPc)() ? 'pcHeight' : 'mobileHeight']
174
- })), /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
159
+ }, /*#__PURE__*/_react["default"].createElement(_common.Collapse, {
175
160
  divider: "dashed",
176
161
  onRefresh: this.reRender,
177
162
  source: [{
@@ -51,8 +51,6 @@ var __extends = void 0 && (void 0).__extends || function () {
51
51
  };
52
52
  }();
53
53
 
54
- var debug = require('debug')('worker:BannerSecondConfig');
55
-
56
54
  var BannerSecondConfig =
57
55
  /** @class */
58
56
  function (_super) {
@@ -66,35 +64,36 @@ function (_super) {
66
64
  _this.getContentPanel = function () {
67
65
  var panelProps = _this.props.panelProps;
68
66
  var source = [{
69
- key: '1',
67
+ key: panelProps.image.id,
70
68
  name: (0, _locale.i18n)('IMAGE'),
71
69
  value: /*#__PURE__*/_react["default"].createElement(_ImageConfig["default"], {
72
70
  data: panelProps.image
73
71
  }),
74
- metaOption: panelProps.image
72
+ metaOption: panelProps.image,
73
+ toggleType: 'triangle'
75
74
  }, {
76
- key: '2',
75
+ key: panelProps.title.id,
77
76
  name: (0, _locale.i18n)('TITLE'),
78
77
  value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
79
78
  data: panelProps.title
80
79
  }),
81
80
  metaOption: panelProps.title
82
81
  }, {
83
- key: '3',
82
+ key: panelProps.text.id,
84
83
  name: (0, _locale.i18n)('TEXT'),
85
84
  value: /*#__PURE__*/_react["default"].createElement(_TextConfig["default"], {
86
85
  data: panelProps.text
87
86
  }),
88
87
  metaOption: panelProps.text
89
88
  }, {
90
- key: '4',
89
+ key: panelProps.button.id,
91
90
  name: (0, _locale.i18n)('BUTTON'),
92
91
  value: /*#__PURE__*/_react["default"].createElement(_ButtonConfig["default"], {
93
92
  data: panelProps.button
94
93
  }),
95
94
  metaOption: panelProps.button
96
95
  }, {
97
- key: '5',
96
+ key: panelProps.secondButton.id,
98
97
  name: (0, _locale.i18n)('SECONDARY_BUTTON'),
99
98
  value: /*#__PURE__*/_react["default"].createElement(_ButtonConfig["default"], {
100
99
  data: panelProps.secondButton
@@ -1,100 +1,86 @@
1
1
  .m-flash-deal-mobile {
2
2
  display: flex;
3
3
  flex-direction: column;
4
- padding: 16px 16px 28px 16px;
5
-
6
- .flash-deal-title {
7
- display: flex;
8
- justify-content: space-between;
9
- align-items: center;
10
-
11
- .left {
12
- display: flex;
13
- align-items: center;
14
-
15
- .icon {
16
- height: 18px;
17
- margin-right: 10px;
18
- }
19
-
20
- .title {
21
- font-family: 'Montserrat';
22
- font-style: normal;
23
- font-weight: 600;
24
- font-size: 14px;
25
- line-height: 18px;
26
- color: #2C2C2C;
27
- margin-right: 10px;
28
- }
29
-
30
- .sub-title {
31
- font-family: 'Montserrat';
32
- font-style: normal;
33
- font-weight: 600;
34
- font-size: 10px;
35
- line-height: 18px;
36
- color: #2C2C2C;
37
- margin-right: 6px;
38
- align-self: end;
39
- }
40
- }
41
-
42
- .right {
43
- display: flex;
44
- align-items: center;
45
-
46
- .text {
47
- font-family: 'Montserrat';
48
- font-style: normal;
49
- font-weight: 600;
50
- font-size: 12px;
51
- line-height: 15px;
52
- color: #0038A8;
53
- margin-right: 5px;
54
- }
55
-
56
- .btn {
57
- white-space: nowrap;
58
- }
59
- }
60
- }
61
-
62
- .flash-deal-list {
63
- margin-top: 16px;
64
- overflow-x: auto;
65
- overflow-y: hidden;
66
- white-space: nowrap;
67
- display: flex;
68
- align-items: flex-start;
69
- justify-content: flex-start;
70
- position: relative;
71
-
72
- .loading-wrap {
73
- display: flex;
74
- align-items: center;
75
- justify-content: center;
76
- padding: 30px;
77
- position: absolute;
78
- top: 0;
79
- bottom: 0;
80
- left: 0;
81
- right: 0;
82
- margin: auto;
83
- }
84
-
85
- // 秒杀特有样式
86
- .m-product-item-wrap {
87
- width: 142px;
88
- margin-right: 8px;
89
-
90
- .product-img {
91
- height: 140px;
92
- width: 140px;
93
- }
94
-
95
- .product-name {
96
- height: 36px;
97
- }
98
- }
99
- }
100
- }
4
+ padding: 2.133vw 2.133vw 3.733vw 2.133vw;
5
+ }
6
+ .m-flash-deal-mobile .flash-deal-title {
7
+ display: flex;
8
+ justify-content: space-between;
9
+ align-items: center;
10
+ }
11
+ .m-flash-deal-mobile .flash-deal-title .left {
12
+ display: flex;
13
+ align-items: center;
14
+ }
15
+ .m-flash-deal-mobile .flash-deal-title .left .icon {
16
+ height: 2.4vw;
17
+ margin-right: 1.333vw;
18
+ }
19
+ .m-flash-deal-mobile .flash-deal-title .left .title {
20
+ font-family: 'Montserrat';
21
+ font-style: normal;
22
+ font-weight: 600;
23
+ font-size: 1.867vw;
24
+ line-height: 2.4vw;
25
+ color: #2C2C2C;
26
+ margin-right: 1.333vw;
27
+ }
28
+ .m-flash-deal-mobile .flash-deal-title .left .sub-title {
29
+ font-family: 'Montserrat';
30
+ font-style: normal;
31
+ font-weight: 600;
32
+ font-size: 1.333vw;
33
+ line-height: 2.4vw;
34
+ color: #2C2C2C;
35
+ margin-right: 0.8vw;
36
+ align-self: end;
37
+ }
38
+ .m-flash-deal-mobile .flash-deal-title .right {
39
+ display: flex;
40
+ align-items: center;
41
+ }
42
+ .m-flash-deal-mobile .flash-deal-title .right .text {
43
+ font-family: 'Montserrat';
44
+ font-style: normal;
45
+ font-weight: 600;
46
+ font-size: 1.6vw;
47
+ line-height: 2vw;
48
+ color: #0038A8;
49
+ margin-right: 0.667vw;
50
+ }
51
+ .m-flash-deal-mobile .flash-deal-title .right .btn {
52
+ white-space: nowrap;
53
+ }
54
+ .m-flash-deal-mobile .flash-deal-list {
55
+ margin-top: 2.133vw;
56
+ overflow-x: auto;
57
+ overflow-y: hidden;
58
+ white-space: nowrap;
59
+ display: flex;
60
+ align-items: flex-start;
61
+ justify-content: flex-start;
62
+ position: relative;
63
+ }
64
+ .m-flash-deal-mobile .flash-deal-list .loading-wrap {
65
+ display: flex;
66
+ align-items: center;
67
+ justify-content: center;
68
+ padding: 4vw;
69
+ position: absolute;
70
+ top: 0;
71
+ bottom: 0;
72
+ left: 0;
73
+ right: 0;
74
+ margin: auto;
75
+ }
76
+ .m-flash-deal-mobile .flash-deal-list .m-product-item-wrap {
77
+ width: 18.933vw;
78
+ margin-right: 1.067vw;
79
+ }
80
+ .m-flash-deal-mobile .flash-deal-list .m-product-item-wrap .product-img {
81
+ height: 18.667vw;
82
+ width: 18.667vw;
83
+ }
84
+ .m-flash-deal-mobile .flash-deal-list .m-product-item-wrap .product-name {
85
+ height: 4.8vw;
86
+ }
@@ -1,38 +1,24 @@
1
1
  .mobile-navigation-mobile {
2
- // display: flex;
3
- // flex-direction: column;
4
- padding-top: 18px;
5
- .group-wrap {
6
- padding: 0 20px;
7
- display: flex;
8
- .one-card {
9
- // display: flex;
10
-
11
- .card-image-wrap {
12
- margin-bottom: 4px;
13
- width: 100%;
14
- }
15
- }
16
- }
17
-
2
+ padding-top: 2.4vw;
18
3
  }
19
-
20
- .newline {
21
- .group-wrap {
22
- flex-wrap: wrap;
23
- }
4
+ .mobile-navigation-mobile .group-wrap {
5
+ padding: 0 2.667vw;
6
+ display: flex;
24
7
  }
25
-
26
- .tile {
27
- .group-wrap {
28
- // overflow-x: scroll;
29
- overflow-x: auto;
30
- flex-wrap: nowrap;
31
- scroll-snap-type: x;
32
- padding: 0 15px;
33
- .one-card {
34
- flex-shrink: 0;
35
- scroll-snap-align: end;
36
- }
37
- }
8
+ .mobile-navigation-mobile .group-wrap .one-card .card-image-wrap {
9
+ margin-bottom: 0.533vw;
10
+ width: 100%;
11
+ }
12
+ .newline .group-wrap {
13
+ flex-wrap: wrap;
14
+ }
15
+ .tile .group-wrap {
16
+ overflow-x: auto;
17
+ flex-wrap: nowrap;
18
+ scroll-snap-type: x;
19
+ padding: 0 2vw;
20
+ }
21
+ .tile .group-wrap .one-card {
22
+ flex-shrink: 0;
23
+ scroll-snap-align: end;
38
24
  }
@@ -1,89 +1,76 @@
1
1
  .m-recommend-mobile {
2
2
  display: flex;
3
3
  flex-direction: column;
4
-
5
- .ant-tabs-nav-operations {
6
- display: none !important;
7
- }
8
-
9
- ::-webkit-scrollbar {
10
- width: 0;
11
- height: 0;
12
- display: none;
13
- }
14
-
15
-
16
- .tab-select-wrap {
17
- display: flex;
18
- align-items: center;
19
- height: 50px;
20
- background: rgb(255 255 255);
21
- overflow: auto;
22
- position: relative;
23
- margin-bottom: 15px;
24
-
25
- .tabTitle {
26
- display: flex;
27
- align-items: center;
28
- text-align: center;
29
- padding: 0 24px;
30
- width: fit-content;
31
- height: 100%;
32
- justify-content: center;
33
- white-space: nowrap;
34
- flex-direction: column;
35
-
36
- img {
37
- height: 16px;
38
- width: 16px;
39
- margin-bottom: 2px;
40
- }
41
- }
42
-
43
- .active-line {
44
- position: absolute;
45
- bottom: 0;
46
- width: 200px;
47
- height: 3px;
48
- background-color: #fff;
49
- transition: .2s all linear;
50
- border-radius: 1.5px;
51
- }
52
- }
53
-
54
- .macyContainer {
55
- display: flex;
56
- margin: 0 16px;
57
- }
58
-
59
- .scrollContainer {
60
- display: flex;
61
- flex-direction: row;
62
- align-items: center;
63
- margin: 0 16px;
64
- overflow-x: auto;
65
- padding-bottom: 15px;
66
-
67
- &.pl_100 {
68
- padding-left: 100px;
69
- }
70
-
71
- .scrollProductList {
72
- display: flex;
73
- flex-direction: row;
74
- align-items: flex-start;
75
-
76
- .productCard {
77
- margin-right: 12px;
78
- }
79
- }
80
- }
81
-
82
- .btnSeeAll {
83
- display: block;
84
- width: fit-content;
85
- min-width: 80px;
86
- margin: 0 auto;
87
- flex: none;
88
- }
89
- }
4
+ }
5
+ .m-recommend-mobile .ant-tabs-nav-operations {
6
+ display: none !important;
7
+ }
8
+ .m-recommend-mobile ::-webkit-scrollbar {
9
+ width: 0;
10
+ height: 0;
11
+ display: none;
12
+ }
13
+ .m-recommend-mobile .tab-select-wrap {
14
+ display: flex;
15
+ align-items: center;
16
+ height: 6.667vw;
17
+ background: #ffffff;
18
+ overflow: auto;
19
+ position: relative;
20
+ margin-bottom: 2vw;
21
+ }
22
+ .m-recommend-mobile .tab-select-wrap .tabTitle {
23
+ display: flex;
24
+ align-items: center;
25
+ text-align: center;
26
+ padding: 0 3.2vw;
27
+ width: fit-content;
28
+ height: 100%;
29
+ justify-content: center;
30
+ white-space: nowrap;
31
+ flex-direction: column;
32
+ }
33
+ .m-recommend-mobile .tab-select-wrap .tabTitle img {
34
+ height: 2.133vw;
35
+ width: 2.133vw;
36
+ margin-bottom: 0.267vw;
37
+ }
38
+ .m-recommend-mobile .tab-select-wrap .active-line {
39
+ position: absolute;
40
+ bottom: 0;
41
+ width: 26.667vw;
42
+ height: 0.4vw;
43
+ background-color: #fff;
44
+ transition: 0.2s all linear;
45
+ border-radius: 0.2vw;
46
+ }
47
+ .m-recommend-mobile .macyContainer {
48
+ display: flex;
49
+ margin: 0 2.133vw;
50
+ }
51
+ .m-recommend-mobile .scrollContainer {
52
+ display: flex;
53
+ flex-direction: row;
54
+ align-items: center;
55
+ margin: 0 2.133vw;
56
+ overflow-x: auto;
57
+ padding-bottom: 2vw;
58
+ }
59
+ .m-recommend-mobile .scrollContainer.pl_100 {
60
+ padding-left: 13.333vw;
61
+ }
62
+ .m-recommend-mobile .scrollContainer .scrollProductList {
63
+ display: flex;
64
+ flex-direction: row;
65
+ align-items: flex-start;
66
+ }
67
+ .m-recommend-mobile .scrollContainer .scrollProductList .productCard {
68
+ margin-right: 1.6vw;
69
+ }
70
+ .m-recommend-mobile .btnSeeAll {
71
+ display: block;
72
+ width: fit-content;
73
+ min-width: 10.667vw;
74
+ margin: 0 auto;
75
+ flex: none;
76
+ }